前端如何实现跨域？

时间: 2024-10-21 11:18:07

(部分内容来自网络，其真实性存疑，为了避免对您造成误导，请谨慎甄别。)

前端如何实现跨域？

当一个请求 url 的协议、域名、端口三者之间任意一个与当前页面 url 不同即为跨域

出于浏览器的同源策略限制。

同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。

1.JSONP原理

利用script元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 数据。

但是JSONP请求一定需要对方的服务器做支持才可以。

JSONP优点是兼容性好，可用于解决主流浏览器的跨域数据访问的问题。

缺点是仅支持get方法具有局限性。

2.CORS原理

实现CORS通信的关键是服务器，需要在服务器端做一些小小的改造。

只要服务器实现了CORS接口，就可以跨源通信。

在响应头上添加Access-Control-Allow-Origin属性，指定同源策略的地址。同源策略默认地址是网页的本身。只要浏览器检测到响应头带上了CORS，并且允许的源包括了本网站，那么就不会拦截请求响应。

3.Nginx

浏览器在访问受限时，可通过不受限的代理服务器访问目标站点。

proxy代理是前端用的最多的解决跨域的方法。

即配置一台和浏览器相同端口的服务器，浏览器访问代理服务器，代理服务器向目标服务器发送请求，由于服务器之间不存在跨域问题，代理服务器就可以拿到请求数据，而后因为浏览器和代理服务器端口号一致，不存在跨域问题，因此浏览器不会拦截从代理服务器收到的数据，顺利拿到请求数据。

例如：浏览器端口号8080，目标服务器端口号5000，在vue中配置代理服务器来访问目标服务器