目录
预检请求
实例讲解
2023.02.04 更新
此文章在介绍跨域加载的同时，也解决了在使用axios.post()时如下跨域加载失败问题：
from origin 'null' 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.
在了解跨域CORS问题时我们首先提出预检请求(options)的概念
预检请求是在发送实际的请求之前，客户端会先发送一个 OPTIONS 方法的请求向服务器确认，如果通过之后，浏览器才会发起真正的请求，这样可以避免跨域请求对服务器的用户数据造成影响。当然有的请求是没有预检请求OPTIONS的，因为 CORS 将请求分为了两类：简单请求和非简单请求。
根据 MDN 的文档定义，请求方法为：GET、POST、HEAD，请求头 Content-Type 为：text/html、text/plain、multipart/form-data、application/x-www-form-urlencoded 的就属于 “简单请求” 不会触发 CORS 预检请求。
例如，如果请求头的 Content-Type 为 application/json 就会触发 CORS的预检请求OPTIONS，这里也会称为 “非简单请求”。
对于如下node.js代码作为服务端,且GET和POST请求都设置了允许跨域访问
//1.引入express
const express = require('express')
//2.创建应用对象
const app = express()
//3.创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/server',(request,response)=>{
//设置响应头 允许跨域访问
response.setHeader('Access-Control-Allow-Origin','*')
//设置响应体
response.send('HELLO AJAX!')
})
app.post('/server',(request,response)=>{
//设置响应头 允许跨域访问
response.setHeader('Access-Control-Allow-Origin','*')
response.send('HELLO AJAX!')
})1.客户端为如下JS代码使用axios.get()执行AJAX请求
var $btn = $('button').eq(0)
$btn.click(function(){
axios.get("http://127.0.0.1:8000/server",{
//url参数设置
params:{
a:1,
b:2
}
}
).then(data => {
console.log(data) //data为响应体，包括其所有响应状态等
})
})由于我们在服务端设置了可以允许跨域加载访问，所以会正确得到结果，且请求头 Content-Type为text/html属于简单请求，不会触发CORS的预检请求(options):
2..若客户端为如下JS代码，使用axios.post()执行AJAX请求跨域加载,则会触发错误
var $btn = $('button').eq(0)
$btn.click(function(){
axios.post("http://127.0.0.1:8000/server",{
a:1, //axios.post()第二个参数设置的是请求体
b:2
}
).then(data => {
console.log(data) //data为响应体，包括其所有响应状态等
})
})
这里的错误指没有允许跨域加载访问，可是我们在服务端POST请求中是设置了允许跨域加载访问的啊，原因出在axios.post()的请求是非简单请求，我们从下图可以看出其请求的请求头格式为application/json：
所以axios.post()就会触发 CORS 预检请求,但是我们node.js服务端却并没有设置app.options()请求的响应函数，所以直接报错,解决方法如下四种：
var $btn = $('button').eq(0)
$btn.click(function(){
axios.post("http://127.0.0.1:8000/server",{
a:1,
b:2
},{
/*修改请求头类型，使其成为简单请求
从而不触发CORS预检请求*/
headers: {
'Content-Type':'application/x-www-form-urlencoded'
}
}
).then(data => {
console.log(data) //data为响应体，包括其所有响应状态等
})
})4.使用cors中间件解决 cors是Express的一个第三方中间件，此方法可以解决AJAX中所有跨域问题，推荐使用此方法。此方法使用步骤如下所示：
//1.引入express
const express = require('express')
const cors = require('cors')
//2.创建应用对象
const app = express()
app.use(cors())
//3.创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/server',(request,response)=>{
//设置响应头 允许跨域访问
response.setHeader('Access-Control-Allow-Origin','*')
//设置响应体
response.send('HELLO AJAX!')
})
app.post('/server',(request,response)=>{
//设置响应头 允许跨域访问
response.setHeader('Access-Control-Allow-Origin','*')
response.send('HELLO AJAX!')
})
app.listen(80,()=>{
console.log("127.0.0.1:80监听中...")
})有同学提问原生JS怎么解决，js中的Ajax使用原生js代码如下所示：
<body>
<button>按钮</button>
<script>
var btn = document.getElementsByTagName('button')[0]
btn.onclick = function(){
var xhr = new XMLHttpRequest()
xhr.open('post','http://127.0.0.1:8000/server')
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=UTF-8");//设置请求内容形式，以便于后台解析表单数据
xhr.send("user=Du") //若为post请求，参数传递在send()方法中以字符串参数形式传递
xhr.onreadystatechange = function(){ //0(xhr未初始化) 1(xhr open了服务器) 2(xhr send了数据出去) 3(接收到了部分服务端返回的数据) 4(服务端返回的数据全部接收了)
if(this.readyState === 4)
{
if(this.status >= 200 && this.status <300 ){
console.log(this.status)
console.log(this.statusText)
console.log(this.getAllResponseHeaders())
console.log(this.response)
}
}
}
}
</script>
</body>nodeJS服务端继续使用cors中间件解决：
//1.引入express
const express = require('express')
var bodyParser = require('body-parser')
const cors = require('cors')
//2.创建应用对象
const app = express()
app.use(cors())
// 配置body-parser
// 只要加入这个配置，则在request请求对象上会多出来一个属性：body
// 也就是说可以直接通过requset.body来获取表单post请求数据
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false}))
//3.创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/server',(request,response)=>{
//设置响应头 允许跨域访问
response.setHeader('Access-Control-Allow-Origin','*')
//设置响应体
response.send('HELLO AJAX!')
})
app.post('/server',(request,response)=>{
//设置响应头 允许跨域访问
response.setHeader('Access-Control-Allow-Origin','*')
response.send('HELLO AJAX!')
console.log(request.body)
})
app.listen(8000,()=>{
console.log("127.0.0.1:8000监听中...")
})
在我们点击按钮后，网页端控制台输出如下：
服务端输出post请求体中携带的内容：
