前端跨域的几种方式

一、什么是跨域

        JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。那什么是跨域呢，简单地理解就是因为JavaScript同源策略的限制，a.com域名下的js无法操作b.com或是c.a.com域名下的对象。
        当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算作“跨域”。

        有一点必须要注意：跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。之所以会跨域，是因为受到了同源策略的限制，同源策略要求源相同才能正常进行通信，即协议、域名、端口号都完全一致。

二、什么是同源策略及其限制

        同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。它的存在可以保护用户隐私信息，防止身份伪造等(读取Cookie)。

 同源策略限制内容有：

        Cookie、LocalStorage、IndexedDB 等存储性内容

        DOM 节点

        AJAX 请求不能发送

但是有三个标签是允许跨域加载资源：

        image标签

        link标签

        script标签

 三、前端跨域的几种方式

1.JSONP原理

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

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

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

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

2.CORS原理

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

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

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

3.Nginx

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

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

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

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

// vue.config.js中配置代理
devServer:{
  proxy:"http://localhost:5000"
}
// 使用代理
axios.get('http://localhost:8080/students').then(
	response => {
		console.log('请求成功了',response.data)
	},
	error => {
		console.log('请求失败了',error.message)
    }
)