VUE CORS跨域问题 - 前端解决方案

问题：

• 前端请求后端接口出现一下错误：

Access to XMLHttpRequest at 'http://6ojq5pvhj0.lb.c1.bhs5.k8s.ovh.net/v1/country_tag/list?page=1&per_page=10' from origin 'http://6ojq416oks.lb.c1.bhs5.k8s.ovh.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

• 这是一个跨域访问问题，可以在后端解决也可以在前端处理，这里就只介绍一下前端处理的方式之一

解决方式之一：

1. 在项目根目录下创建一个json文件，名字自定，例如：proxy.conf.json ，新增内容：

{
  "/sso": {
    "target": "https://api.gofaster.space",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true

  }
}

这里的 “/sso” 是后端API子路径，target 为 API 域名。

2. 在 package.json 文件中修改启动指令：

"scripts": {
    "ng": "ng",
    "start": "ng serve --dev --proxy-config proxy.conf.json",
    ...
  },

这里是新增启动参数 --proxy-config，指定为刚刚创建的文件。这里使用代理文件配置的代理启动。

说明：

如果原先你需要访问http://abc.ff:8080/sso/server获取服务，那么现在你只需要把代码中的“10.4.60.200:8080”改为“localhost:4200”即可（cli默认端口为4200，根据自己的启动端口编写）。

参考：

https://blog.csdn.net/m0_37529303/article/details/73381266