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 * 可以去掉，否则会报：

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)

        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()
});

参考文章

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

CORS-跨域实战 #

概要内容 #

前端需要做什么? #

后端需要怎么配置? #

Nginx #

API Server (Nodejs) #

参考文章 #

CORS-跨域实战

概要内容

前端需要做什么?

后端需要怎么配置?

Nginx

API Server (Nodejs)

参考文章