面试题：Vue项目多环境配置下如何处理跨域问题

不同环境跨域配置方案

开发环境：
- 使用Vue CLI的proxy配置：在项目根目录下的vue.config.js文件中进行配置。例如：
```
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://example.com', // 目标服务器地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};
```
- 说明：这样在开发环境中，以/api开头的请求会被代理到http://example.com，解决开发环境跨域问题。

测试环境：

Nginx反向代理配置：在测试服务器的Nginx配置文件中添加反向代理规则。例如：

server {
  listen 80;
  server_name test.example.com;

  location / {
    proxy_pass http://backend-server;
    proxy_set_header Host $host;
    proxy_set_header X - Real - IP $remote_addr;
    proxy_set_header X - Forwarded - For $proxy_add_x_forwarded_for;
    proxy_set_header X - Forwarded - Proto $scheme;
  }
}

说明：测试环境一般在服务器上部署，通过Nginx反向代理，将请求转发到实际的后端服务器，同时可以设置一些请求头信息。

生产环境：

同样可使用Nginx反向代理：配置方式与测试环境类似，但要根据生产环境的实际服务器地址和域名进行调整。
HTTPS证书配置：如果生产环境使用HTTPS，需要配置正确的证书，确保反向代理与后端服务器的通信安全。例如，在Nginx配置中添加证书相关配置：

server {
  listen 443 ssl;
  server_name production.example.com;

  ssl_certificate /path/to/cert.pem;
  ssl_certificate_key /path/to/key.pem;

  location / {
    proxy_pass http://backend - production - server;
    proxy_set_header Host $host;
    proxy_set_header X - Real - IP $remote_addr;
    proxy_set_header X - Forwarded - For $proxy_add_x_forwarded_for;
    proxy_set_header X - Forwarded - Proto $scheme;
  }
}

可能遇到的坑及解决方案

开发环境proxy配置无效：
- 坑：配置了vue.config.js中的proxy，但请求仍然没有代理。
- 解决方案：
  - 确保vue - cli - service版本支持proxy配置，若版本过低可能不支持或有兼容性问题。
  - 检查devServer配置是否正确，特别是target地址是否正确，以及changeOrigin是否设置为true。
测试和生产环境Nginx配置错误：
- 坑：配置了Nginx反向代理，但出现502 Bad Gateway等错误。
- 解决方案：
  - 检查Nginx配置文件语法是否正确，可使用nginx -t命令检查。
  - 确认后端服务器地址是否可访问，可通过ping或telnet命令测试。
  - 查看Nginx日志文件（一般在/var/log/nginx/目录下），根据日志提示解决问题，如权限不足、端口被占用等。
跨域请求头问题：
- 坑：前端发起跨域请求时，后端要求特定的请求头，但前端设置后仍报错。
- 解决方案：
  - 在Nginx反向代理配置中添加相关请求头设置，例如：proxy_set_header Custom - Header 'value';
  - 在后端服务器代码中检查请求头验证逻辑，确保正确处理跨域请求头。
HTTPS证书相关问题：
- 坑：生产环境配置HTTPS证书后，出现证书不被信任等问题。
- 解决方案：
  - 确保证书是由受信任的证书颁发机构（CA）颁发的，若使用自签名证书，需在客户端导入证书。
  - 检查证书路径和权限设置，确保Nginx能正确读取证书文件。

星途面试题库

面试题：Vue项目多环境配置下如何处理跨域问题

知识考点

面试题答案

不同环境跨域配置方案

可能遇到的坑及解决方案