前端跨域问题 比较急！

Question

前端已经配置proxy，但是点击登录接口还是报错，跨域问题，状态码403（测试过接口没问题）

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

前端跨域问题解决方案

你已经配置了 proxy，但是仍然出现跨域问题，状态码为 403。这个问题可能是因为 proxy 配置不正确或 Vue.js 的跨域设置不正确。

首先，检查 proxy 配置是否正确，确保 proxy 服务器正确地转发请求。

其次，检查 Vue.js 的跨域设置是否正确。可以在 Vue.js 项目的 main.js 文件中添加以下代码：

Vue.prototype.$axios = axios.create({
  baseURL: 'http://your-proxy-server.com', // 你的 proxy 服务器地址
  withCredentials: true // 允许跨域请求带上 cookie
})

其中，baseURL 设置为你的 proxy 服务器地址，withCredentials 设置为 true，以便跨域请求带上 cookie。

如果以上解决方案不起作用，可以尝试使用 CORS middleware 在 proxy 服务器上启用 CORS 支持。

如果你使用的是 Nginx proxy 服务器，可以添加以下配置：

location /api {
  proxy_pass http://your-backend-server.com;
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
  add_header Access-Control-Allow-Origin *;
  add_header Access-Control-Allow-Headers 'Content-Type';
  add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE';
}

其中，add_header 指令添加了 CORS 头信息，允许跨域请求。

如果你使用的是 Apache proxy 服务器，可以添加以下配置：

ProxyPass /api http://your-backend-server.com
ProxyPassReverse /api http://your-backend-server.com
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "Content-Type"
Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE"

其中，Header 指令添加了 CORS 头信息，允许跨域请求。

希望这些解决方案能够帮助你解决前端跨域问题。