vue-cli+webpack前端使用后台接口跨域问题的多种解决及其原理和产生原因
解决方式: 基于vue-cli 2.0版本,下载好工程后,找到config文件夹里的index.js文件,然后就是把上图的target改成你的接口地址前面的那部分就好了,底下的^/api就是把前面那些替代成空字符串,接口就写替代的后面那部分路由地址就好了,不过我推荐不要用‘/api’还是用‘’空字符串代替,这样你部署到服务器的时候路由才不会出问题,不然有可能会出现问...
解决方式:
基于vue-cli 2.0版本,下载好工程后,找到config文件夹里的index.js文件
,
然后就是把上图的target改成你的接口地址前面的那部分就好了,底下的^/api就是把前面那些替代成空字符串,接口就写替代的后面那部分路由地址就好了,不过我推荐不要用‘/api’还是用‘’空字符串代替,这样你部署到服务器的时候路由才不会出问题,不然有可能会出现问题,毕竟你前端代理在路由前面加了/api。在本地浏览器前面会替代的那部分会显示为localhost,其原理就是解决跨域问题三种方式中的设置代理
跨域所产生的原因:是由浏览器的同源策略引起的,所谓同源就是相同协议(http和https不同),相同域名,相同端口
解决方式: ① jsonp(只适用于get方式,其实是历史遗留问题,也就是我们用script标签包裹着,就不会产生跨域)
② 设置代理(也就是再写一个同源的后台脚本,利用这个脚本去获取远端数据,就不会产生跨域)
③ 后端处理,即XHR2(例如 php修改响应头头)
header(Access-control-Allow-Origin: * '); //*代表允许访问的来源(所有),但是你在请求头携带cookie等东西时,必须要指明,也就是设置跨域白名单。
header('Access-control-Allow-Method: POST,GET'); //允许访问的方式
node的处理方式:
// 跨域白名单设置
const whiteList = function(req, res, next) {
// if (list.includes(req.headers.origin)) {
res.header("Access-Control-Allow-Origin", req.headers.origin);
res.header("Access-Control-Allow-Headers", "Content-Type, authorization, Cache-Control");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header('Access-Control-Allow-Credentials', 'true');
res.setHeader("Content-Type", "text/html");
res.setHeader("Content-Length", 10000);
// } else {
// return;
// }
if (req.method === 'OPTIONS') {
return next();
}
next();
};
node项目地址,欢迎star
同时这点也是面试时,喜欢问的。
更多推荐
所有评论(0)