持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第8天，点击查看活动详情

这篇文章算是一个简单的科普文吧，最近刷抖音看到黑X马某地又招了一大批JAVA，就在下面评论了一下能不能教会这群java配cors，结果被回骂了,故有此文。

什么是CORS

CORS全称跨源资源共享。

什么叫资源？互联网上每一个资源其实就是一个地址，就好比门牌号。ip地址如果表示一栋楼，那么端口号就相当于楼里的房间。协议就好比门卡，刷A门卡，刷B门卡，可能就会进入不同的单元。

限制跨资源共享其实是浏览器的保护措施。就好比你和邻居，中间隔了一道防盗门，邻居不能影响你，你也不能影响邻居。如果没有这道防盗门可就说不准了。

为了保护你自己也保护别人，所以浏览器加上了这个限制：2个不同资源不能随意共享。

相关的请求头

一般来说，CORS主要与一下几个请求头有关

Access-Control-Allow-Headers: Content-Type, Content-Length, Authorization, Accept, X-Requested-With;
Access-Control-Allow-Origin: http://test.preflight.qq.com;
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE;

预检请求 preflight request

上面说到限制跨资源共享其实就是浏览器给每个资源装了一个防盗门。那么怎么样确认这个门是锁定的还是没锁呢？

这时候就用到了预检请求。我们经常会发现调用接口的时候，会先发一个options请求，其目的就是判断是否存在CORS限制。

如何配置

nginx

    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE' always;
        add_header 'Access-Control-Allow-Headers' '*' always;
        add_header 'Access-Control-Max-Age' 1728000 always;
        add_header 'Content-Length' 0;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        return 204;
    }

    if ($request_method ~* '(GET|POST|DELETE|PUT)') {
        add_header 'Access-Control-Allow-Origin' '*' always;
    }

express

express 可以直接通过cors三方库设置，首先安装它 npm i cors 然后在你初始化express的时候

const app = require('express')()
app.use(require('cors')())

fastify

fastify与express比较类似，有相同的插件，只需要安装npm i fastify-cors即可。

fastify.register(
    require('fastify-cors'),
    {
        optionsSuccessStatus:204
    }
)

为什么要写这篇文章

其实前后端交互中碰见最多的问题就是跨域，如果前端不懂，往往会被后端糊弄。但是掌握了这3种跨域方法之后，如果后端不会配nginx，你配。如果不让你动nginx，那么本地启动一个服务，开发并测试完，如果线上跨域了，那就是运维或者后端的问题了.