关于ajax跨域:node-server响应头设置允许跨域却仍然存在跨域问题的解决方案

案例

明天在做全栈的练习我的项目时，发现在发POST申请时，存在跨域问题（server的header设置了容许跨域），server大略如下

const express = require('express')
const app = express()
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.post('/login', (request, response) => {
    //容许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    response.setHeader('Access-Control-Allow-Headers','*');
    response.send('Hello')
})

前端是用axios发送的ajax申请，这里会有一点影响，然而重点不在这，所以这里不贴代码。

起因剖析

点开浏览器的network调试界面，发现除了post申请还有一个options申请，而后看看console里的报错信息

Access to XMLHttpRequest at 'http://127.0.0.1:8000/login' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

果然发现是preflight request的问题，也就是这个options申请的跨域没有通过。

那又为什么会有这个preflight呢？参考CORS文档发现有这三种状况会发送预申请：

1. 申请办法不是GET/POST/HEAD
2. 设置了默认申请头意外的自定义申请头

3. POST申请中的content-type不是

   • application/x-www-form-urlencoded
   • multipart/form-data
   • text/plain

然而咱们所用的axios发送的申请默认的content-type是application/json，所以天经地义须要去发送这个预申请，那么只须要让这个预申请跨域通过就好了

解决方案

1. server改路由规定（post->all）
   最暴力的办法，间接将跨域给到all申请类型，所以预申请的options必定是可能跨域的

   app.all('/login', (request, response) => {
    //容许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    response.setHeader('Access-Control-Allow-Headers','*');
    response.send('Hello')
   })

2. 增加一个options的路由规定
   这个就是隔靴搔痒的办法，在下方独自增加一条新的规定，应用options申请类型

   app.post('/login', (request, response) => {
    //容许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    response.setHeader('Access-Control-Allow-Headers','*');
    response.send('Hello')
   })
   app.options('/login', (request,response) => {
    response.setHeader("Access-Control-Allow-Origin","*")
    response.setHeader("Access-Control-Allow-Headers", "*");
    response.end()
   })