当前位置：首页 > article >正文

前端跨域~简述

article 2024/11/14 4:19:31

前言：绿蚁新醅酒，红泥小火炉

第一：前端跨域（粗谈概念）

1. 疑惑

当前端请求后端接口不通，浏览器控制台出现类似信息，则需要解决跨域
Access to XMLHttpRequest at ‘http://47.100.214.160:10086/api/select’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource…

2. 解决

解决跨域方式，前端方式一：本地设置代理或者nginx上配置、后端方式：通过注解或配置【有些后端人员会反驳你，接口在postman上访问是有数据没问题的，因为postman上不会有限制，只有浏览器访问才有同源策略的限制；】

3. 同源策略

什么是浏览器的同源策略？浏览器的同源策略的限制（约束通信双方，必须满足：同协议、同域名、同端口三者一致，才能进行通信访问）

举例分析：
http://47.100.214.160:10086
http://localhost:8080
协议：http=http 、域名：47.100.214.160≠localhost、端口10086≠8080 （注：这里的47.100.214.160 是IP，这个IP会有映射的域名，而这里的lacalhost就是本机域名，所以二者不可能相等）
在浏览器上，通信必须同时满足协议、域名、IP三者一致才可以！

第二：跨域解决（开发、生产环境）

1.本地配置代理（webpack的配置）：在项目根目录创建代理文件，将请求转发到后端服务器（例如：angular中的proxy.conf.json、vue中的vue.config.js
2.反向代理‌：通过Nginx等反向代理服务器来转发请求，客户端与代理服务器通信，代理服务器再与目标服务器通信，从而绕过同源策略‌
3.CORS（跨域资源共享）策略‌：在服务器端设置合适的CORS响应头，允许指定源进行跨域请求（服务器在响应中附加Access-Control-Allow-Origin头，指定允许访问的域‌）（后端人员配置）。
4.iframe标签：1. 使用 document.domain 和 iframe的方式是一种简单【开发环境】跨域方法，而且在同一顶级域名下的子域之间进行跨域通信；缺陷：如果域名不同，浏览器会阻止跨域请求通信，并且iframe中的页面无法访问对方的DOM对象。2. 使用postMessage方法来实现【生产环境】跨域通信。postMessage允许不同源的窗口进行安全的跨域通信；
5.websocket：websocket协议自带跨域功能，不受同源策略限制，因此可以轻松地在不同域的页面间进行通信，如果单纯就这样就好了…（虽然WebSocket协议本身不受同源策略限制，但在建立连接时需要通过HTTP握手过程（浏览器和服务器建立连接，是通过http请求和响应完成的），而这个过程会受到浏览器同源策略的限制，然后~ 又回到跨域问题…）