浏览器解决跨域，本地node代理原理与实践详解
2023-10-14 06:27:25
前言
在前端开发中，跨域是一个常见的问题。跨域是指浏览器限制不同源的网页互相请求资源，以防止恶意攻击。对于本地开发人员来说，跨域问题可能会导致无法请求后端接口数据，影响开发效率。
跨域产生的原因
跨域产生的原因是浏览器的同源策略（Same-Origin Policy，SOP）。SOP规定，浏览器只允许同源的网页互相请求资源。同源是指网页的协议、域名和端口都相同。
例如，以下两个网页是同源的：
http://example.com/index.html
http://example.com/about.html
以下两个网页不是同源的：
http://example.com/index.html
https://example.com/index.html
http://example.com:8080/index.html
解决跨域的方法
跨域的解决方法有多种，常见的方法包括：
- CORS（Cross-Origin Resource Sharing）
- JSONP（JSON with Padding）
- 本地node代理
CORS
CORS是一种跨域的解决方案，允许不同源的网页互相请求资源。CORS需要服务器端支持，需要在服务器端的响应头中添加以下字段：
Access-Control-Allow-Origin: *
表示允许所有源的网页请求资源。
JSONP
JSONP是一种跨域的解决方案，使用JSONP可以将数据封装在JavaScript函数中，然后通过<script>标签动态加载数据。JSONP不需要服务器端支持，但需要客户端代码进行处理。
本地node代理
本地node代理是一种跨域的解决方案，通过在本地运行一个node代理服务器，将跨域请求转发到后端服务器。本地node代理需要在本地安装node.js和相关依赖包，然后启动代理服务器。
本地node代理的原理
本地node代理的原理是，在本地运行一个node代理服务器，该服务器监听本地的一个端口（例如：3000），同时代理请求到后端服务器（例如：http://api.example.com）。当浏览器向本地代理服务器发送请求时，代理服务器将请求转发到后端服务器，然后将后端服务器的响应返回给浏览器。
本地node代理的优点是，不需要服务器端支持，也不需要客户端代码进行处理，只需要在本地安装node.js和相关依赖包，然后启动代理服务器即可。
本地node代理的实践
以下是如何使用本地node代理来解决跨域问题的步骤：
- 安装node.js和相关依赖包
npm install -g http-proxy-middleware
- 创建代理配置文件
在项目根目录下创建proxy.conf.js文件，并添加以下内容：
module.exports = {
'/api': {
target: 'http://api.example.com',
changeOrigin: true
}
};
- 启动代理服务器
在项目根目录下运行以下命令：
http-proxy-middleware -f proxy.conf.js
- 在前端代码中配置代理
在前端代码中，可以使用axios等库来发送请求，并配置代理地址。以下是如何使用axios来配置代理地址：
import axios from 'axios';
const instance = axios.create({
baseURL: '/api',
proxy: {
host: 'localhost',
port: 3000
}
});
- 发送请求
在前端代码中，可以使用instance来发送请求，例如：
instance.get('/users').then(response => {
console.log(response.data);
});
总结
本地node代理是一种简单有效的跨域解决方案，不需要服务器端支持，也不需要客户端代码进行处理，只需要在本地安装node.js和相关依赖包，然后启动代理服务器即可。
