无法解决 vue 跨域的问题
小白一枚,设置了 vue.config.ja 中的 proxy 没有用,控制台依旧显示是跨域的问题,我的接口是能正常访问数据的,
小白一枚,设置了 vue.config.ja 中的 proxy 没有用,控制台依旧显示是跨域的问题,我的接口是能正常访问数据的,
请求不能带外域
接口响应加 CROS 头, nginx 也配置一下
location / {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods ‘GET, POST, OPTIONS’;
add_header Access-Control-Allow-Headers ‘DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization’;
if ($request_method = ‘OPTIONS’) {
return 204;
}
}
跨域是浏览器端做的限制,所解决的核心问题是浏览器会自动为请求携带 cookies 信息导致的不安全问题。
常规的解决方案一个是绕过,另一个是放行。
先说放行,放行需要服务器端配合,为请求的 response 添加 CORS 头信息,当然并不一定要在服务器端做,只要在到达浏览器前这个 response 里携带了 CORS 头信息就好。
再说绕过,绕过即是 vue 等所做 proxy 的原理,上面说到跨域其实是浏览器所做的限制,而 proxy 所做的是用 Node 做一次转发,Node 脱离了浏览器环境不受跨域限制而此时你再通过这个 Node 得到返回内容,所以想要 proxy 生效,你要做的是确保你的请求经过的是 proxy 。
假如你的域是`localhost:8080`,proxy 设置的`/api`,目标是`www.baidu.com`。设置 proxy 之后请求的是`http://www.baidu.com/api/xxx`,这样是否能跨域取决于 www.baidu.com 是否设置了跨域,此时的流程是 应用程序 -> baidu -> 浏览器 -> 应用程序。理想状态应该是 应用程序 -> 代理 -> baidu -> 代理 -> 浏览器 -> 应用程序。