什么是跨域？为什么会跨域？
跨域（Cross-Origin）是指在浏览器中，当一个域名的页面向另一个域名的资源发送请求时，如果两个域名的协议、域名或端口不完全相同，就会产生跨域问题。
同源策略 (Same-Origin Policy) 是浏览器的一项安全策略，限制了从一个源加载的文档或脚本如何与来自其他源的资源进行交互。所谓同源，即协议、域名和端口号完全相同。
跨域问题产生的原因是为了保护用户的隐私和数据安全。如果没有同源策略的限制，恶意网站可以通过在页面中执行跨域请求，获取用户的敏感信息或进行其他恶意操作。
例如，假设一个网页 http://www.example.com 的 JavaScript 代码试图通过 AJAX 请求访问 http://api.example.com/data 的数据，但两个网址的域名不同。由于存在跨域问题，浏览器会拒绝这个请求。
如何解决跨域？
为了解决跨域问题，常见的方法包括：
- 跨域资源共享（CORS）：服务器设置响应头来允许跨域请求。
- JSONP（JSON with Padding）：通过动态创建
<script>标签来实现跨域请求。 - 代理服务器：前端通过请求同源服务器，然后由同源服务器代理转发请求到其他域名。
需要注意的是，在服务器端进行一些配置或使用特定方法后，才能实现跨域请求，以确保安全性和数据的有效传输。
什么是正向代理和反向代理？
- 正向代理：“一台代理服务器”代替了”客户端”，去和”目标服务器”进行交互，即代理客户端。
用途：隐藏客户端真实IP，突破限制访问外国网站。例如vue项目中配置proxy代理。 - 反向代理：“一台代理服务器”代替了”目标服务器”，去和”客户端”进行交互，即代理服务端
用途：隐藏服务器真实IP，提供负载平衡，即指向后端的多台服务器中空闲的一台；例如nginx配置反向代理。
正向代理和反向代理是两种不同的代理服务器工作方式，它们的主要区别在于代理服务器的角色和工作方式：
- 正向代理（Forward Proxy）： 正向代理是位于客户端和目标服务器之间的代理服务器。当客户端发起请求时，请求首先发送给正向代理服务器，然后由代理服务器转发请求到目标服务器，并将目标服务器返回的响应再返回给客户端。
正向代理隐藏了真实的客户端身份，代表客户端与目标服务器进行通信。在这种情况下，目标服务器不知道请求的真正来源是谁，只知道请求来自正向代理服务器。
正向代理常用于以下情况：
- 绕过防火墙限制：如果某些网站在你所在的网络环境中被防火墙拦截，你可以使用正向代理服务器访问这些网站。
- 提供匿名性：正向代理可以隐藏客户端的真实IP地址，保护用户的隐私。
- 缓存和加速：代理服务器可以缓存目标服务器返回的数据，提高响应速度和减轻目标服务器负载。
- 反向代理（Reverse Proxy）： 反向代理位于目标服务器和客户端之间，代替目标服务器接收客户端的请求，并将请求转发到目标服务器上。目标服务器处理请求并将响应返回给反向代理服务器，再由反向代理服务器将响应返回给客户端。
客户端无需知道目标服务器的真实身份和位置，只与反向代理服务器进行通信。反向代理服务器根据请求的内容和负载均衡算法，将请求转发到多个目标服务器上。这样可以提高系统的安全性、性能和可伸缩性。
反向代理常用于以下情况：
- 负载均衡：反向代理服务器可以根据负载情况将请求分发到多个目标服务器上，使各个服务器负载均衡。
- 防止直接暴露目标服务器：反向代理隐藏了目标服务器的真实IP地址和位置，提高了服务器的安全性。
- 缓存和加速：反向代理服务器可以缓存目标服务器返回的内容，加快响应速度并减轻目标服务器负载。
总结： 正向代理代表客户端向目标服务器发起请求，隐藏了客户端身份；反向代理代表目标服务器向客户端提供服务，隐藏了目标服务器的身份。两者的功能和使用场景有所不同。
在Vue中配置Porxy正向代理
在 Vue 中，正向代理和 Nginx 反向代理都可以用于解决跨域问题和提供代理功能，但它们的实现方式和应用场景略有不同。
- Vue 中的正向代理： 在开发环境下，Vue CLI 提供了一种简单的配置来实现正向代理。通过设置
vue.config.js文件中的devServer.proxy属性，可以将特定请求转发到另一个服务器上。
例如，假设我们正在开发一个 Vue 应用，前端代码运行在 http://localhost:8080，而后端 API 服务运行在 http://api.example.com。如果存在跨域问题，可以通过正向代理来解决。我们可以在 vue.config.js 文件中添加以下配置：
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://api.example.com',
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
}
}
};
上述配置表示，当前端通过 /api 路径发送请求时，将会被代理到 http://api.example.com。通过设置 changeOrigin: true，后端服务器会认为请求是从同源发出的。同时，pathRewrite 可以重写请求路径，将 /api 替换为空字符串，以便正确匹配后端接口。
配置Nginx反向代理
- 通过配置 Nginx 的
location指令，可以将客户端请求转发到不同的后端服务器上。
例如，假设我们有一个前端应用运行在 http://example.com，而后端 API 服务运行在 http://api.example.com。我们可以通过修改 Nginx 的配置文件，添加以下内容：
server {
listen 80;
server_name example.com;
location /api {
proxy_pass http://api.example.com;
proxy_set_header Host $host;
}
}上述配置表示，当客户端通过 /api 路径发送请求时，Nginx 将会代理到 http://api.example.com。通过设置 proxy_set_header Host $host，Nginx 会将原始请求的 Host 头部信息转发给后端服务器，保持请求的正确性。
总结： 在 Vue 中，通过正向代理可以方便地在开发环境中解决跨域问题；而在生产环境中，通常会使用 Nginx 进行反向代理，将请求转发到不同的后端服务器上。两者都提供了代理功能，但在实现方式和使用场景上略有区别。