vue跨域解决方法

vue跨域解决方法

使用axios请求

第一步骤

在vue.config.js 文件中 module.exports = { } 中添加

devServer: {

proxy: {

'/profile': { //指定 路径 要 跨域请求地址

// 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题

// 将/api开头的url转发到target上。

target: ' https://sso.www.eee.cn/profile',// 跨域请求地址

changeOrigin: true, //虚拟的站点需要更管origin

ws: true, // 代理websockets

secure: true, // 如果是https接口，需要配置这个参数

pathRewrite: {

// 顾名思义，将/api重写为 / 此时url变为 http://192.168.101.110:8888/ 而不是 http://192.168.101.110:8888/api

'^/profile': ''

}

}

}

第二步骤

在封装axios请求中设置

const service = axios.create({

baseURL: '/profile',//定义要跨域的接口路径

withCredentials: true,//是否支持跨域

timeout: 500000, // request timeout

headers: {

'Cache-Control': 'no-cache',

'Content-Type': 'application/x-www-form-urlencoded'

}

})

跨域问题是因为浏览器的同源策略引起的，一种浏览器的安全机制，要求 协议，域名，端口 ，都要一致！

出于浏览器的同源策略限制，浏览器会拒绝跨域请求。

什么叫跨域？非同源请求，均为跨域。名词解释：同源 —— 如果两个页面拥有相同的协议（protocol），端口（port）和主机（host），那么这两个页面就属于同一个源（origin）。

　怎么解决跨域？最常用的三种方式： JSONP、CORS、postMessage 。

jsonp，只支持get，不支持post，需要调用前端和被调用后端配合（比较常用）

后端HttpClient进行转发，两次请求，效率低，安全（类似Nginx反向代理）

服务端设置响应头，允许跨域，适于小公司快速解决问题

Nginx搭建API接口网关

Zuul搭建API接口网关

后四种都属于服务端设置，对于目前还是一个纯前端的我来说，先把前端的搞懂再说，所以在此只说前端

jsonp工作原理理解

jsonp实际上是通过动态插入js的方式实现的跨域，因为通过script标签引入js文件没有跨域一说

web客户端通过调用脚本的方式去调用跨域服务端动态生成的js文件（一般以json为后缀），同时传递一个callback参数给服务端，服务端以这个参数名为函数名，调用此函数以参数的形式将数据传到web端，这样就实现了前端跨域请求服务端数据。

【JSONP的优缺点】

　优点：兼容性好（兼容低版本IE）

　缺点：1.JSONP只支持GET请求； 2.XMLHttpRequest相对于JSONP有着更好的错误处理机制

　CORS ：是W3C 推荐的一种新的官方方案，能使服务器支持 XMLHttpRequest 的跨域请求。CORS 实现起来非常方便，只需要增加一些 HTTP 头，让服务器能声明允许的访问来源。

postMessage : window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持 window.postMessage方法。

        我们前端使用接口时，时常遇到跨域问题，一般都是后台设置开放访问权限解决跨域，如果后台不配合或者为了安全问题而不能开放权限，那么我们前端只能自己解决跨域问题了！！！直接再问vue中使用nodeJS进行代理就可以解决跨域问题。

1、首先找到项目所在的config文件下的index.js，打开此文件；

2、找到module.exports里面的dev模块，dev:{ proxyTable:{ } }

将target设置成你想跨域的域名，

changeOrigin设置成true（即：允许跨域）；

pathRewrite设置新的路径，这个其实没有必要重新设置；

host设置成：localhost；

port设置成自己本地项目的端口号如：8001；

3、找到main.js并打开，添加：Vue.prototype.HOST = '/api' //设置全局的请求域名；这样就可以全局使用了！

4、在请求接口的页面这样请求接口就可以啦：

var urls = this.HOST +'/login/get/dingdingUser'//this.HOST就是你跨域的域名，这样就可以直接跨域了；这时urls就是你的接口名称啦！！！

---