前端开发者必知，跨域及本地代理的正确打开方式！

什么是跨域？

跨域是指浏览器对不同域名的访问限制。在现代网络开发中，前端应用和后端服务器通常部署在不同的域名下。当前端应用向后端服务器发送请求时，就会发生跨域。

跨域的产生主要是因为浏览器的同源策略。同源策略是一项安全机制，旨在防止恶意网站窃取其他网站的数据。它规定了只有来自相同协议、相同端口和相同主机的请求才能被浏览器允许。

前端跨域的解决方法

1. CORS

CORS（Cross-Origin Resource Sharing）是解决跨域问题最常见的方法。它允许不同域名的网站在浏览器中进行数据交换。

要启用 CORS，后端服务器需要在响应头中添加以下字段：

Access-Control-Allow-Origin: *

这将允许所有域名的网站访问该服务器上的资源。

2. JSONP

JSONP（JSON with Padding）是一种解决跨域问题的简单方法。它利用了 <script> 标签可以跨域加载资源的特性。

要使用 JSONP，需要在前端代码中创建一个 <script> 标签，并将其 src 属性设置为后端服务器提供的 JSONP 端点。后端服务器需要返回一个包含 JSON 数据的 JavaScript 代码块。

前端代码可以通过以下方式访问 JSONP 数据：

<script src="https://example.com/jsonp_endpoint?callback=myCallback">
</script>

<script>
function myCallback(data) {
  // 处理 JSONP 数据
}
</script>

3. 代理服务器

代理服务器是一种位于客户端和服务器之间的中间服务器。它可以将客户端的请求转发给服务器，并将其响应返回给客户端。

使用代理服务器可以解决跨域问题，因为代理服务器可以绕过浏览器的同源策略。

常用的代理服务器有：

• Charles
• Fiddler
• ngrok

4. 浏览器扩展

有一些浏览器扩展可以帮助解决跨域问题。这些扩展通常会修改浏览器的同源策略，允许跨域请求。

常用的浏览器扩展有：

• CORS Anywhere
• Proxy SwitchyOmega

本地代理

本地代理是指在本地计算机上运行的代理服务器。它可以将本地计算机上的请求转发给远程服务器，并将其响应返回给本地计算机。

本地代理通常用于以下目的：

• 调试跨域问题
• 访问被防火墙或代理服务器阻止的网站
• 绕过网站的地域限制

本地代理的种类

本地代理主要有两种类型：

• 前缀代理
• 反向代理

前缀代理 将本地计算机上的所有请求都转发给远程服务器。这种类型的代理通常用于调试跨域问题。

反向代理 只将本地计算机上的某些请求转发给远程服务器。这种类型的代理通常用于访问被防火墙或代理服务器阻止的网站，或绕过网站的地域限制。

如何使用本地代理

要使用本地代理，需要先在本地计算机上安装一个代理服务器软件。常用的代理服务器软件有：

• Charles
• Fiddler
• ngrok

安装好代理服务器软件后，需要对其进行配置。配置完成后，就可以使用本地代理来访问远程服务器了。

总结

跨域是前端开发中常见的问题，但可以通过使用 CORS、JSONP、代理服务器或浏览器扩展来解决。本地代理则可以用于调试跨域问题、访问被防火墙或代理服务器阻止的网站，或绕过网站的地域限制。