前端跨域（前端跨域问题）



 

目录

1浏览器的同源策略

1.1同源策略概述

1.2什么是源（origin）？

2跨域会受到哪些限制

2.1限制DOM访问

2.2限制Cookie访问

2.3限制Ajax获取数据

3几个注意点 

4CORS 解决 Ajax 跨域问题

4.1CORS 概述

4.2CORS 解决简单请求跨域

4.3简单请求与复杂请求

4.4CORS 解决复杂请求跨域

4.5借助 cors 库快速完成配置

5JSONP 解决跨域问题

6配置代理解决跨域

6.1自己配置代理服务器

6.2使用 Nginx 搭建代理服务器

6.3借助脚手架搭建服务器 

---

代码地址 git clone https://gitee.com/childe-jia/cross-domain-test.git

 

3同源请求

『源A』的脚本不能访问『源B』的 DOM。

『源A』不能访问『源B』的 cookie

『源A』可以给『源B』发请求，但是无法获取『源B』响应的数据。

 备注：在上述限制中，浏览器对 Ajax 获取数据的限制是影响最大的一个，且实际开发中经常遇到。

• 1跨域限制仅存在浏览器端，服务端不存在跨域限制。
• 2即使跨域了，Ajax 请求也可以正常发出，但响应数据不会交给开发者。
• 3 、

整体思路：服务器在给出响应时，通过添加Access-Control-Allow-Origin响应头，来明确表达允许某个源发起跨域请求，随后浏览器在校验时，直接通过。

服务端核心代码（以express框架为例）：

CORS 会把请求分为两类，分别是：① 简单请求、② 复杂请求。

关于预检请求：

• 1发送时机：预检请求在实际跨域请求之前发出，是由浏览器自动发起的。
• 2主要作用：用于向服务器确认是否允许接下来的跨域请求。
• 3基本流程：先发起OPTIONS请求，如果通过预检，继续发起实际的跨域请求。
• 4请求头内容：一个OPTIONS预检请求，通常会包含如下请求头：

1第一步：服务器先通过浏览器的预检请求，服务器需要返回如下响应头：

2第二步：处理实际的跨域请求（与处理简单请求跨域的方式相同）

服务端核心代码：

上述的配置中需要自己配置响应头，或者需要自己手动封装中间件，借助cors库，可以更方便完成配置

●安装cors

●简单配置cors

●完整配置cors

默认js是不能访问后端设置的响应头的，需要后端暴露

1JSONP 概述： JSONP 是利用了

• ○第一步：客户端创建一个
• ○第二步：服务端接收到请求后，将数据封装在回调函数中并返回。
• ○第三步：客户端的回调函数被调用，数据以参数的形势传入回调函数。

3图示：

4代码示例：

5jQuery 封装的 jsonp

?callback=?' 为固定格式 会自动解析

服务器之间是没有跨域问题的，要使用express 启动静态资源保证自己的服务器跟页面在同源下

借助http-proxy-middleware配置代理

 

优点：

• 功能丰富：http-proxy-middleware提供了丰富的配置选项，可以满足各种代理需求。
• 可以灵活配置多个代理：可以配置多个代理服务器，分别对应不同的接口路径。
• 可以拦截请求：可以通过自定义的处理函数对请求进行拦截和修改。

缺点：

• 配置相对复杂：需要了解http-proxy-middleware库的配置规则和参数。
• 不适用于生产环境：http-proxy-middleware主要用于开发环境，不适用于生产环境。

使用场景：

• 适用于使用任何构建工具的前端项目，可以与任何开发服务器配合使用。
• 适用于需要灵活配置多个代理服务器的场景。
• 适用于需要对请求进行拦截和修改的场景。

整体思路：让nginx充当两个角色，既是 静态内容服务器，又是代理服务器。

修改nginx配置如下，注意nginx的根目录最好不是 C 盘

2修改前端项目，让所有请求都转发给 /dev，随后重新打包

随后直接访问nginx服务器即可，例如 nginx如果运行在8099端口，则访问

随后会遇到刷新404问题，追加nginx配置来解决

加上这两个“/”就剔除掉了dev

1. 使用vue.config.js文件配置代理：

在Vue项目的根目录下创建一个vue.config.js文件，并添加以下代码：

上述代码中，我们使用配置项来配置代理服务器。其中属性用于配置代理的规则，表示需要代理的接口路径。属性表示代理的目标服务器地址，属性表示是否改变请求的源地址，属性用于重写请求的路径。

优点：

• 配置简单：使用webpack-dev-server的代理配置，只需要在webpack配置文件中进行简单的配置即可。
• 功能全面：webpack-dev-server提供了丰富的配置选项，可以满足大部分代理需求。
• 可以拦截请求：可以通过自定义的处理函数对请求进行拦截和修改。

缺点：

• 需要重启服务器：配置修改后需要重新启动webpack-dev-server才能生效。
• 不适用于生产环境：webpack-dev-server主要用于开发环境，不适用于生产环境。

使用场景：

• 适用于使用webpack构建的前端项目，通过webpack-dev-server来启动开发服务器的场景。
• 适用于需要简单的代理配置，并且不需要频繁修改代理配置的场景。

到此这篇前端跨域（前端跨域问题）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！

版权声明：

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

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