关于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文档发现有这三种状况会发送预申请： 申请办法不是GET/POST/HEAD设置了默认申请头意外的自定义申请头POST申请中的content-type不是 application/x-www-form-urlencodedmultipart/form-datatext/plain然而咱们所用的axios发送的申请默认的content-type是application/json，所以天经地义须要去发送这个预申请，那么只须要让这个预申请跨域通过就好了 解决方案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')})增加一个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()})