跨域请求携带cookie（跨域 cookies）



企业开发时会分开发环境、测试环境以及生产环境，但是有的企业开发只有真正发布到线上的生产环境的流程才会严格配置，有的项目开发环境或者测试环境中，前后端配置没有特别严格要求，就导致前端请求发送时返回错误信息。比如项目发送了一个跨域请求，该请求需要自动携带Cookie信息给服务器进行身份认证，但是浏览器对跨域的请求不会自动携带Cookie的数据，此时在生产环境中前后端配置正常该请求正常返回数据，但是在开发环境和测试环境中要求不严格，前后端没有配合设置好配置信息，导致请求无法自动携带Cookie信息返回失败的信息，以下有两种方法解决。

1.前端请求时在请求头中配置；

2.服务端在响应头中配置;

3.服务端在响应头中配置

以下通过express实现后端服务器，利用简单的html页面模拟一个跨域请求的环境进行解释(ps:用其他语言的参考上方三点进行配置，此处只做简单的模拟)

1.1 前端页面搭建

index.html
该页面由服务器app1托管，运行服务器后，浏览器输入,显示该页面

1.2后端服务器搭建

app1.js

app2.js

结果：
页面初始化，返回登录结果，浏览器中存储返回的Cookie信息

配置前，发送跨域请求返回失败信息

配置后，发送跨域请求返回需要的信息

参考文章：面试官问：跨域请求如何携带cookie?

如何配置可跨域的浏览器，看这里Chrome浏览器的跨域设置
配置完成后，可自动携带Cookie

此为一种特殊情况，公司在本地开发代码是登录项目时使用的是已经发布到开发环境的登录地址，本地开发无登录的入口，所以登录时转跳的也是已经部署后的开发环境，而不是本地开发时的页面，无法将Cookie信息存入，此事后就会需要使用可跨域的浏览器，并安装插件配合使用

ModHeader它可以用来自定义HTTP请求头或重写响应头，包含覆盖Chrome浏览器请求头的默认值。
此处已经下载好了直接用就可
链接：https://pan.baidu.com/s/1uoiAq1yBL4PbIrC284k6uw?pwd=9xhh
提取码：9xhh

在Chrome浏览器中，点击右上角三个点->扩展程序->管理扩展程序->将下载好的文件拖入扩展程序管理页面中

然后在浏览器右上角固定该插件，点击该插件选择+MOD就可配置请求头信息了，配置完成后，在允许跨域的浏览器中发送请求，当发送请求时会请求头会携带配置好的信息

参考文章：ModHeader插件使用说明

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/cjjbc/24930.html