假如你坚持要通过浏览器获得它们的数据,你应该自己写一个代理,在浏览器和你要请求的API之间。就像我们在方法B里做的那样。
简单的请求
一个叫做预检查的机制会发送一个OPTIONS请求到服务器。如果服务器没有返回带有特殊头部的数据,简单请求GET或者POST请求仍然会发送,服务器的数据也会返回,但是浏览器会阻止Javascript获取这次请求的数据。
请求方式使用下列方法之一:
GET
HEAD
POST
Content-Type 的值仅限于下列三者之一:
text/plain
multipart/form-data
application/x-www-form-urlencoded
非简单请求(预检请求)
如果明确的需要在一个请求里添加cookies,自定义头部信息或则其他特性,这将不在是一个简单请求,并且服务器没有适当的返回,这次请求讲不会发送。就是复杂请求时,如果OPTIONS的请求,服务器没有做出适当的返回,后面真实的请求将不会发送。
使用了下面任一 HTTP 方法:
PUT
DELETE
CONNECT
OPTIONS
TRACE
PATCH
Content-Type 的值不属于下列之一:
application/x-www-form-urlencoded
multipart/form-data
text/plain
在登录后拿到 token 设置Authorization 也是会报 跨域错误的。
app.all 是个中间键
app.all('*', function(req, res, next) {
let port = req.headers.origin.split(':').pop();
res.header('Access-Control-Allow-Origin', 'http://127.0.0.1:'+ port)
res.header('Access-Control-Allow-Headers', 'X-Requested-With, mytoken')
res.header('Access-Control-Allow-Headers', 'X-Requested-With, Authorization')
res.setHeader('Content-Type', 'application/json;charset=utf-8')
res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization, Accept,X-Requested-With')
res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS')
res.header('X-Powered-By', ' 3.2.1')
next();
});
vue
devServer: {
proxy: {
'/rng': { //这里最好有一个 /
target: 'http://45.105.124.130:8081', // 后台接口域名
ws: true, //如果要代理 websockets,配置这个参数
secure: false, // 如果是https接口,需要配置这个参数
changeOrigin: true, //是否跨域
pathRewrite:{
'^/rng':''
}
}
}
}