【Vue+Node】解决axois请求数据跨域问题

摘要:
该项目基于Vue前端+节点背景启动两个服务。当请求数据时,端口不一致,导致跨域错误:(No‘Access Control Allow Origin‘headrispresent on the requestedresource)检查官方API后,我们得到以下两个想法:1.在节点后台设置,允许访问1.1,并使用代码控制应用程序。all('*',函数(req,res,next){res.header

项目基于Vue前端+Node后台,启动两个服务,请求数据时,端口不一致造成跨域报错:

(No 'Access-Control-Allow-Origin' header is present on the requested resource)

【Vue+Node】解决axois请求数据跨域问题第1张

经过查官方API得到以下两种思路:

1、在Node后台中设置,允许访问

   1.1、用代码控制

app.all('*', function(req, res, next) {  
  res.header("Access-Control-Allow-Origin", "http://localhost:8080");  
  res.header("Access-Control-Allow-Headers", "X-Requested-With");  
  res.header("Access-Control-Allow-Methods","POST,GET");  
  res.header("X-Powered-By",' 3.2.1')  
  res.header("Content-Type", "application/json;charset=utf-8");  
  next();  
});

   1.2、安装Core包,例如:

npm install cors --save
const cors = require('cors')
app.use(
  cors({
    origin: ['http://localhost:8080'], //前端地址
    methods: ['GET', 'POST'],
    alloweHeaders: ['Conten-Type', 'Authorization']
  })
)

 但,若之前遇到后台不是自己开发的接口,而是第三方接口,例如,Google,这样就无法从服务器设置入手。

 

2、在vue.config.js中进行代理配置:(proxy)

  proxy: { // 配置跨域
      '/api': {
        target: 'http://localhost:3001/',
        ws: true,
        changOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },

  在页面调用的时候,用api代替 http://localhost:3001/

  axios.get('api/test/fscontent') //调用了http://localhost:3001/test/fscontent接口
    .then(response => {
      console.log(response.data)
    })

  

免责声明:文章转载自《【Vue+Node】解决axois请求数据跨域问题》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇gnuplot运行方式Linux磁盘管理及LVM讲解下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

squid故障汇总

1、COSS will not function without large file support (off_t is 4 bytes long. Please reconsider recompiling squid with --with-large-files Bungled squid_webcache.conf 。。。。。。。 检查是否在编译...

轻松玩转windows之wamp开发环境部署

1. 下载WampServer以及安装 WampServer与XAMPP类似,都是开发环境集成包,实现了开发环境即可即用的效果。 WampServer在部署前需要安装Microsoft的开发依赖包,经过几次实战,我在网上找到一个比较实用的修复包。 如果依赖不全,则会报“丢失**.dll”文件错误。 ​ 传送门:DirectX修复工具 下载地址:https:...

PHPCMS(2)PHPCMS V9 环境搭建(转)

转自:http://www.cnblogs.com/Braveliu/p/5072920.html PHPCMS V9的学习总结分为以下几点: 【1】PHPCMS 简介 PHP原始为Personal Home Page的缩写,(外文名:PHP: Hypertext Preprocessor,中文名:“超文本预处理器”)是一种通用开源脚本语言。 CMS是C...

解决JBoss只能通过localhost(127.0.0.1)而不能通过IP访问

原文地址:http://fanzhongyun.iteye.com/blog/1454967 刚开始测试访问远程EJB对象的时候,我的EJB是发布到我本人本机的JBoss6上的,所以请求的URL我写的是localhost(或者是本机回路地址:127.0.0.1),测试正常。但是当我将请求的URL改成:192.168.0.3(本人的局域网IP),再次测试的时...

Navicat连接mysql8.0.1版本出现1251--Client does not support authentication protocol requested by server的解决

Navicat连接mysql8.0.1版本出现1251--Client does not support authentication protocol requested by server的解决 转载自:https://blog.csdn.net/XDMFC/article/details/80263215 好不容易安装好mysql,但又出现了mysq...

HttpClient 教程 (A)

前言 超文本传输协议(HTTP)也许是当今互联网上使用的最重要的协议了。Web服务,有网络功能的设备和网络计算的发展,都持续扩展了HTTP协议的角色,超越了用户使用的Web浏览器范畴,同时,也增加了需要HTTP协议支持的应用程序的数量。 尽管java.net包提供了基本通过HTTP访问资源的功能,但它没有提供全面的灵活性和其它很多应用程序需要的功能。Ht...