目录
1、浏览器的同源策略
1.1 源
1.2 同源与非同源
1.3 同源请求与非同源请求
2、跨域受到的限制
3、注意点
4、CORS解决Ajax跨域问题
4.1 CORS概述
4.2 CORS解决简单请求跨域
4.3 简单请求与复杂请求
4.4 CORS解决复杂请求跨域
4.5 借助CORS库快速完成配置
5、JSONP解决跨域
6、配置代理解决跨域
6.1 自己配置代理服务器
6.2 使用Nginx搭建代理服务器
6.3 借助脚手架搭建代理服务器
浏览器为了确保资源安全，而遵循的一种策略。
源 = 协议 + 域名 + 端口号
所处源与目标源不一致，就是非同源，又称异源或跨域
例如：源A和源B，它们是非同源，则浏览器会有如下限制
- DOM访问限制：源A的脚本不能读取和操作源B的DOM
- Cookie访问限制：源A不能访问源B的cookie
- Ajax响应数据限制：源A可以给源B发请求，但是无法获取源B的响应的数据
备注：在上述限制中，浏览器对Ajax获取数据的限制是影响最大的一个，且实际开发中经常遇到
- 跨域限制仅存在浏览器端，服务端不存在跨域限制
- 即使跨域了，Ajax请求也可以正常发出，但响应数据不会交给开发者
- <link>、<script>、<img>....这些标签发出的请求也可能跨域，只不过浏览器对标签跨域不做严格限制，对开发几乎无影响
CORS全称：Cross-Origin Resource Sharing（跨域资源共享），是用于控制浏览器校验跨域请求的一套规范，服务器依照CORS规范，添加特定响应头来控制浏览器校验，规则如下：
- 服务器明确表示拒绝跨域请求，或没有表示，则浏览器校验不通过
- 服务器明确表示允许跨域请求，则浏览器校验通过
备注：使用CORS解决跨域是最正统的方式，且要求服务器是“自己人”
整体思路：服务器在给出响应时，通过添加Access-Control-Allow-Origin响应头，来明确表达允许某个源发起跨域请求，随后浏览器在校验时，直接通过
服务端核心代码，以（express框架为例）
CORS会把请求分为两类、分别是：简单请求、复杂请求
简单请求复杂请求请求方法为：GET、HEAD、POST
- 不是简单请求，就是复杂请求
- 复杂请求会自动发送预检请求
请求字段要符合《CORS安全规范》
简记：只要不手动修改请求头，一般都能符合改规范
请求头的Content-Type的值只能是以下三种
- text/plain
- multipart/form-data
- application/x-www-form-urlencoded
关于预检请求：
- 发送时机：预检请求再实际跨域请求之前发出，是由浏览器自动发起的
- 主要作用：用于向服务器确认是否允许接下来的跨域请求
- 基本流程：先发起OPTIONS请求，如果通过预检，继续发起实际的跨域请求
- 请求头内容：一个OPTIONS预检请求，通常会包含如下请求头
请求头含义Origin 发起请求的源Access-Control-Request-Method实际请求的HTTP方法Access-Control-Request-Headers实际请求中使用的自定义头（如果有的话）
1、第一步：服务器先通过浏览器的预检请求，服务器需要返回如下响应头
响应头含义Access-Control-Allow-Origin允许的源Access-Control-Allow-Methods允许的方法Access-Control-Allow-Headers允许的自定义头Access-Control-Max-Age
预检请求的结果缓存时间（可选）服务端核心代码：
上述的配置中需要自己配置响应头，或者需要自己手动封装中间件，借助cors库，可以更方便完成配置
1、安装cors
2、简单配置
3、完整配置
1、JSONP概述：JSONP是利用了<script>标签可以跨域加载脚本，且不受严格限制的特性，可以说是程序员智慧的结晶，早起一些浏览器不支持CORS时，可以靠JSONP解决跨域
2、基本流程
- 第一步：客户端创建一个<script>标签，并将其src属性设置为包含跨域请求的URL，同时准备一个回调函数，这个回调函数用于处理返回的数据
- 第二步：服务端接收到请求后，将数据封装在回调函数中并返回
- 第三步：客户端的回调函数被调用。数据以参数的形式传入回调函数。
3、图示
4、服务端核心代码：
5、客户端核心代码：
到此这篇前端跨域请求（前端跨域请求头）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！借助 http-proxy-middleware 配置代理
1. 安装 Nginx
首先，你需要在你的服务器上安装 Nginx。根据你的操作系统，安装步骤可能有所不同。
在 Ubuntu/Debian 系统上：
在 CentOS/RHEL 系统上：
在 Fedora 系统上：
安装完成后，启动 Nginx 并设置开机自启：
2、配置 Nginx 作为代理服务器
接下来，配置 Nginx 作为代理服务器。你可以编辑 Nginx 配置文件，通常在 或 ，具体路径根据操作系统和 Nginx 版本可能有所不同。
基本的代理配置示例如下：
- 打开配置文件：
- 添加一个 块来配置代理设置。例如，假设你想要将所有请求代理到 ： 这里的 指令将请求转发到 。你可以根据需要更改为你实际的后端服务器地址。
指令用于设置转发请求时的 HTTP 头信息。
- 保存文件并退出编辑器。
- 测试配置是否正确：
- 重新加载 Nginx 配置：
3、验证代理设置
现在，你可以通过访问你的代理服务器地址来验证是否能够成功地将请求代理到后端服务器。例如，访问 ，你应该能够看到来自 的内容。
4、其他配置（可选）
根据需求，你可能还需要进行其他配置，例如：
- 负载均衡： 如果你有多个后端服务器，可以使用 块来进行负载均衡。
- SSL/TLS 加密： 如果你需要 HTTPS，可以配置 SSL 证书来加密代理流量。
- 缓存： 配置 Nginx 缓存以提高性能。
修改 文件：
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdkf/52818.html