0%

CORS-跨域实战

概要内容

  • 前端需要做什么?
  • 后端需要怎么配置?

由于浏览器的同源安全策略,作为前端开发你使用API调用接口必定会碰到跨域问题,网上太多的文章,大部分都是讲得不太清楚,让你看得特别懵逼,让你可能会做出以下愚蠢行为:跨域配置写到前端的header中、Nginx 跨域配置到Web节点中、瞎填Access-Control-Allow-Headers中的值等等,会导致怎么配置都不对,令你自己发狂。经验提醒:不要急着瞎改瞎试,看完理论相关文章后再尝试,然后静下心来思考流程是怎么运转的,用这样的方式很快就会配对了。以下是我成功跨域配置,希望给你提供一点帮助。


前端需要做什么?

请求时使用到的header字段梳理并告知后端


后端需要怎么配置?

Nginx

注意:针对API 服务配置跨域,而不是Web服务

  • 疑问1:为啥要配置nginx,因为请求需要转换,所以需要配置
  • 注意:Access-Control-Allow-Origin ,必须加在Nginx层,否则请求不会转换至api server 层,所以api server 层的Access-Control-Allow-Origin 可以去掉,否则会报:
1
2
3
4
5
6
7
8
9
10
location /secret-http-api/ {
proxy_pass http://127.0.0.1:3001/;
proxy_read_timeout 240s;
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header Access-Control-Allow-Headers 'Content-Type,Authorization,Content-Encoding,Accept-Encoding';
if ($request_method = 'OPTIONS') {
return 204;
}
}

API Server (Nodejs)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
        app.use(function (req, res, next) {
if (req.path !== '/' && !req.path.includes('.')) {
res.set({
/* 允许后端发送cookie*/
// 'Access-Control-Allow-Credentials': true,
/*任意域名都可以访问,或者基于我请求头里面的域*/
// 'Access-Control-Allow-Origin': '*',
/*允许请求头字段*/
// 'Access-Control-Allow-Headers': 'Accept,Content-Encoding,Content-Type,Accept-Encoding',
/*允许请求方式*/
'Access-Control-Allow-Methods': 'POST,GET,OPTIONS',
/*预检成功后相同请求无需预检的有效时间(单位:秒)*/
'Access-Control-Max-Age': 3600,
/*默认与允许的文本格式json和编码格式*/
'Content-Type': 'text/plain; charset=utf-8'
})
}
req.method === 'OPTIONS' ? res.status(204).end() : next()
});

参考文章

以上: 如发现有问题,欢迎留言指出,我及时更正

如何文章对你有益,请给我买杯豆浆喝