案例
今天在做全栈的练习项目时,发现在发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-urlencoded
- multipart/form-data
- text/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() })
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。