简单请求 vs 非简单请求

最新推荐文章于 2024-03-02 13:49:36 发布

baoleilei6

最新推荐文章于 2024-03-02 13:49:36 发布

阅读量817

点赞数

CC 4.0 BY-SA版权

文章标签： http ajax restful

原文链接：https://juejin.cn/post/6844904063742509064

本文探讨了跨域问题的产生原因，包括浏览器限制和xhr请求的条件，以及如何通过修改被调用方、设置代理和使用JSONP等方式来解决。讲解了JSONP的后台改动需求和cookie在跨域中的作用。重点介绍了fetch、request和axios在处理跨域时的设置技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么会发生跨域问题？

浏览器限制，跨域[协议，域名，端口任一不一样，就会跨域]，XHR请求(只要不是xhr请求，浏览器是不报跨域的)三个同时满足，才会产生跨域

2. 怎么解决？

浏览器-xhr-跨域｛1. 被调用方修改为支持跨域 2.调用方设置代理｝

JSONP说明：

JSONP-后台是需要改动的，请求类型是script

content-type: application/JavaScript
弊端:服务端需要改动代码支持，只支持get,发送的不是xhr请求(异步)

带有Cookie的跨域

在前后端分离的开发过程中，遇到跨域请求时，则服务端需加上：

res.header('Access-Control-Allow-Origin', req.get("Origin"));
res.header('Access-Control-Allow-Headers', 'credentials,Content-Type, Content-Length, Authorization, Accept, X-Requested-With, token');
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
    
//若要返回cookie、携带seesion等信息则将此项设为true。此时Access-Control-Allow-Origin不能设置为*
res.header("Access-Control-Allow-Credentials","true"); 复制代码

如果有自定义的 header 字段，则需要在 'Access-Control-Allow-Headers' 中添加。
如果需要设置 cookie ，则需要设置 Access-Control-Allow-Credentials 为 true ，并且 Access-Control-Allow-Origin 不能设置为 *。
请求时需要带上 credential 相关的参数，这点很重要，否则 session request id 每次都不一样。

若使用 fetch ，设置 credentials: 'include'

const init = {
     headers: {
         'Accept': 'application/json',
          'Content-Type': 'application/json;charset=UTF-8',
     },
     method: 'GET',
     credentials: 'include'
}复制代码

若使用 request ，设置 request.defaults({jar: true}) 。

// qs，表示query参数
var options = {
    'url': url,
    'qs': {
         'code': code,
     }
}
    
 // 设置可以使用cookie
var defaultReq = request.defaults({jar: true})

defaultReq(options, function (error, response, body) {
}复制代码