案例

明天在做全栈的练习我的项目时，发现在发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()})