跨域报错解决方法

CORS跨域报错解决方法

代码背景

//客户端地址
    const xhr = new XMLHttpRequest()
    xhr.withCredentials = true
    xhr.open('GET',`http://127.0.0.1:8000/data`)
    xhr.setRequestHeader('Accept','*/*')
    xhr.setRequestHeader('Origin','http://localhost:3001')//此行无需手动设置，否则会报错
    xhr.send()

//服务端

//导入cors,解决跨域
const cors = require('cors')
app.use(cors())

app.get('/data',(request,response)=>{
    response.setHeader('Access-Control-Allow-Origin','http://localhost:3001')
    response.setHeader('Access-Control-Allow-Credentials','true')
    const data ={
        username:'ming',
        userage:24,
        body:'还可以还可以还可还可以还可以还可还可以还可以还可还可以还可以还可'
    }
    response.send(data)
})

需要注意的点

1. 客户端的xhr.setRequestHeader后的地址一定要与服务端的response.setHeader完全相同，多一个斜杠都不行。
2. 在客户端设置xhr.setRequestHeader('Origin','http://localhost:3001')会引发Refused to set unsafe header "Origin"的安全错误，因为CORS会认为客户端是冒充安全的地址，解决方法是，不要手动设置请求头地址，浏览器会自动解析客户端地址。