同源策略
同源策略指浏览器会限制协议、域名、端口号不同的两个地址进行AJAX的方式请求。(只有在浏览器的环境中才会有这个限制,服务器和浏览器之间没有这个限制)
前端跨域的三种方案
1.JSONP(JSON with Padding)
JSONP是一种利用script进行跨域请求的技巧,其原因是script标签的src属性不受同源策略影响而实现的。(这种请求方式需要和后端进行配合返回一段js调用客户端的函数)
const request = (res) => {
console.log(res);
};//在上面的这个函数进行接收
const script = document.createElement("script");
script.src ="https://example.com/test/jsonp?callback=request&name=123&age=18";
//请求地址为 https://example.com/test/jsonp
//后面为携带参数?callback=request&name=123&age=18
document.body.appendChild(script); //这句话表示发送请求
JSONP的问题
- 需要后端进行配合返回一个一段js代码调用前端的函数。
- 由于利用src进行接口请求,所以只能发送get请求,有参数限制大小的问题。
- 不是一个真正的AJAX请求在控制台网络里面的Fetch/XHR里面看不到。
2.CROS(Cross Origin Resource Share)
Cross Origin Resource Share,跨域资源共享,这种方式不用客户端做出任何变化客户端不需要修改代码,只要在被请求的服务器响应时添加一个AccessControl-Allow-Origin的响应头,表示这个资源允许被这个域访问。
整个CROS通信过程,都是由浏览器完成,对于开发者来说就像是同域请求一样。
3.proxy代理
本地开启代理服务器。请求由代理服务器发出这样就不受浏览器同源策略限制,服务器和服务器之间不涉及到跨域问题。
常见的代理方式
- 利用liveServer进行代理
- 在工程中利用webpack devserver进行代理
-
nginx => nginx服务器代理
使用vsCode的LiveServer进行跨域代理