使用Vue从本地主机调用终结点时出现Cors错误

Question

我正在使用Vue创建一个简单的应用程序，并使用axios调用endpoint

axios.post(url, {
  email: this.email,
})
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
  });

我得到了错误

源于http://localhost:8080'已被CORS策略阻止：对飞行前请求的响应未通过访问控制检查：它没有HTTP ok状态。

问题不在服务器级别，我已经从Postman或直接使用CURL进行了测试，它不会生成错误。

感谢Shrinivas Bendkhale的评论。我设法解决了这个问题。

起初它不起作用，所以有必要向代理添加“logLevel”和“路径重写”选项。

• 日志级别：允许在终端中查看代理如何工作

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '^/rp': {
        target: process.env.API_OLD_SERVER,
        secure: false,
        logLevel: 'debug',
        pathRewrite: { 
          '^/rp': '/'
        }
      },
    },
  },
}

所以我的电话如下

axios.post('/rp/full-path', {
    usermail: this.email,
  })
    .then((response) => {
      console.log(response.data);
    })
    .catch((error) => {
      console.log(error);
    });

Answer 1

在vue内部。配置。js文件添加以下行：

    // vue.config.js
    module.exports = {
    // options...
         devServer: {
            proxy: 'https://mywebsite/',
         }
    }