浏览器跨域及其解决方案

1 年前

May

title: 浏览器跨域及其解决方案
author: May
date: 20220428

什么是跨域

跨域的表现

解决跨域问题

- 浏览器设置(不推荐)

- 前端的非正统解决方式

- CORS(跨域资源共享)

- 配置nginx反向代理

跨域出于浏览器的同源策略限制，同源是指协议、域名、端口都一样， 同源策略（Sameoriginpolicy） 是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。

http://www.tcsl.com:8080
协议 :// 域名: 端口

调用页面时接口数据不返回，控制台中会有红色的报错信息中有类似于 CORS policy 关键字。另外，在最新谷歌浏览器中，会有提出类似于loaded over HTTPS此种关键字，均可以考虑为跨域导致。

tips: 有的时候后台小伙伴使用postman测试好的接口，前端不可以使用，原因就是postman不是浏览器，不会有同源限制，同理移动设备app开发和小程序开发也不会有这个问题。这个不是前端bug，同源限制也不是一个不好的规则。

虽然跨域不是一个不好的事情，但是对于前后端分离的web开发来说确实需要解决的，大致的解决方案可分为：

直接从根源解决问题，让浏览器安全策略不起作用。这个方法虽然可以解决问题但是不现实。

JSONP(不推荐)
jsonp仅仅适用于 GET 请求，而且需要前后端配合，前端请求jsonp数据格式，后台将返回数据塞进一个回调方法的参数中。这种方式不灵活且对应的请求方式单一，所以现阶段开发都不推荐了。
PROXY(开发环境适用)
设置代理是在前端开发阶段常用的解决跨域的方式，但是却不能在生产环境中适用。原理是因为前端开发是在本地起了一个node服务，当浏览器请求接口时，需要由node转发的，这个时候就由前端项目的配置告诉node服务接口转发需不需要代理，可否接受跨域，如果配置了，则在开发层面解决了开发时的跨域问题了。

官方正统解决方案， CORS规范 允许服务器向浏览器返回一些HTTP Headers，浏览器可以基于这些HTTP Headers来决定是否突破SOP的限制。需要后端配合，浏览器需要什么，接口服务给什么。

浏览器	接口/接口响应头
协议	接口保证协议一致
域/端口	接口响应头Access-Control-Allow-Origin应纳入浏览器发送来的
content-type	特殊的content-type也需要后台兼容

nginx是一个高性能的HTTP和反向代理web服务器，nginx用来解决跨域问题的原理与 前端非正统解决方式 的 proxy 的思路是一致的。项目请求接口由nginx服务发出，获取到的数据再经由nginx传递给前端项目，这样前端的请求其实都是由nginx处理的，就没有跨域发生了。

Tips
CORS与nginx作比较：

发布于 2022-04-28 17:25