方式一(推荐):
proxyTable 设置(config --> index):复杂请求时需要设置
devServer: {
open: true, // 启动项目后自动开启浏览器
host: "localhost", // 对应的主机名,默认localhost
port: 8080, // 端口号
proxy: { // 主要配置
// api 自定义标识,用来识别带api的请求
"/api": {
target: "http://a.baidu.com.cn", // 对 http://localhost:8080/api/test 的请求会代理到 http://a.baidu.com.cn/api/test
changeOrigin: true, // 如果接口跨域,需要进行这个参数配置
// secure: false, // 如果是https接口,需要配置这个参数
pathRewrite: {
"^/api": "", // 路径重写,替换 target中请求地址,http://a.baidu.com.cn/api/test --> http://a.baidu.com.cn/test
},
},
},
},
说明:实际需要访问接口: http://a.baidu.com.cn/test (跨域)
本地配置请求地址为: api/test.php
真实效果:http://本机Ip:8080/api/test --> http://a.baidu.com.cn/test
方式二:
1、前端设置
// main.js 文件
import axios from 'axios'
axios.defaults.withCredentials = true; // 允许axios请求携带cookie等凭证【接口跨域情况下需要设置】
2、后端设置
说明: 以下设置对同域情况下没影响
//当**Credentials为true时,**Origin不能为星号,需为具体的ip地址【如果接口不带cookie,**Origin无需设成具体ip】
response.setHeader("Access-Control-Allow-Origin", "http://IPv4:端口");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "GET,POST,PATCH,PUT,OPTIONS,DELETE");
response.setHeader("Access-Control-Allow-Headers", "Origin,Content-Type,Cookie,Accept,Token");
3、cors 跨域请求【参考:cors 跨域请求】
CORS(Cross Origin Resource Sharing) :跨域请求。众所周知,在以前,跨域可以采用代理、JSONP等方式,而在Modern浏览器面前,这些终将成为过去式,因为有了CORS。
cors:简单请求
HTTP方法是以下之一: HEAD GET POST
HTTP头信息不超出以下几种字段:
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type,但仅能是下列之一
application/x-www-form-urlencoded
multipart/form-data
text/plain
简单请求的发送从代码上来看和普通的XHR没太大区别,但是HTTP头当中要求总是包含一个域(Origin)的信息。该域包含协议名、地址以及一个可选的端口。不过这一项实际上由浏览器代为发送,并不是开发者代码可以触及到的
简单请求的部分响应头及解释如下:
如果仅仅是简单请求,那么即便不用CORS也没有什么大不了,但CORS的复杂请求就令CORS显得更加有用了。简单来说,任何不满足上述简单请求要求的请求,都属于复杂请求。比如说你需要发送PUT、DELETE等HTTP动作,或者发送Content-Type: application/json的内容。
复杂请求表面上看起来和简单请求使用上差不多,但实际上浏览器发送了不止一个请求。其中最先发送的是一种"预请求",此时作为服务端,也需要返回"预回应"作为响应。预请求实际上是对服务端的一种权限请求,只有当预请求成功返回,实际请求才开始执行。
预请求以OPTIONS形式发送,当中同样包含域,并且还包含了两项CORS特有的内容:
显而易见,这个预请求实际上就是在为之后的实际请求发送一个权限请求,在预回应返回的内容当中,服务端应当对这两项进行回复,以让浏览器确定请求是否能够成功完成。
复杂请求的部分响应头及解释如下:
一旦预回应如期而至,所请求的权限也都已满足,则实际请求开始发送。
通caniuse.com得知,目前大部分Modern浏览器已经支持完整的CORS,但IE直到IE11才完美支持,所以对于PC网站,还是建议采用其他解决方案,如果仅仅是移动端网站,大可放心使用。