在前端开发中，我们经常会遇到跨域问题。当一个页面的代码试图从一个不同域名或端口的服务器获取数据或请求资源时，浏览器会出现“SecurityError”错误，这是浏览器自带的安全机制。
为什么需要跨域限制？
跨域限制是一种浏览器安全机制，它的目的是保护用户隐私和安全。如果没有跨域限制，攻击者可以利用一个恶意网站来读取其他网站的信息或执行 CSRF 攻击等恶意行为。
如何解决跨域问题？
- JSONP
JSONP 是通过 script 标签引入 js 文件，并将回调函数作为参数传递给后端，在后端返回的 js 文件中调用该回调函数并将数据传递回来的方式来解决跨域问题。
<script>
function handleData(data) {
console.log(data);
}
</script>
<script src="http://example.com/api?callback=handleData"></script>- CORS
CORS（Cross-Origin Resource Sharing）是一种通过在 HTTP 头部添加特定字段来告诉浏览器哪些源可以获得哪些资源的机制。要使用 CORS，后端需要在响应头中添加如下字段：
Access-Control-Allow-Origin: http://example.com Access-Control-Allow-Methods: GET, POST, PUT Access-Control-Allow-Headers: Content-Type
- 代理服务器
通过在自己的服务器上搭建一个代理服务器，将请求发送到目标服务器，并将响应返回给浏览器，从而绕过跨域限制。
总结
跨域限制是浏览器的一种安全机制，为了保护用户隐私和安全。解决跨域问题的方法有 JSONP、CORS 和代理服务器三种。开发人员需要根据实际情况选择合适的方法来解决跨域问题。
示例代码
JSONP
后端返回如下 js 文件：
handleData({
"name": "John",
"age": 30,
"city": "New York"
});前端代码：
<script>
function handleData(data) {
console.log(data);
}
</script>
<script src="http://example.com/api?callback=handleData"></script>CORS
后端添加如下字段：
Access-Control-Allow-Origin: http://example.com Access-Control-Allow-Methods: GET, POST, PUT Access-Control-Allow-Headers: Content-Type
前端代码：
fetch('http://example.com/api')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));代理服务器
假设代理服务器地址为 http://proxy.example.com，后端地址为 http://example.com/api，前端代码：
fetch('http://proxy.example.com/api')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8648