有没有办法解决Vite js中的CORS错误？

Question

我尝试了开发人员针对同一问题提供的所有解决方案。我像这样更新了Vite.config.js文件 -

//vite.config.js

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
  server: {
    proxy: {
    '/api': {
      target: 'http://localhost:3000/',
      changeOrigin: true,
      secure: false,
      rewrite: (path) => path.replace(/^\/api/, '')
    },
    cors:false
    },
  },
  define: {
    'process.env': {}
  }
})

我在两个文件中添加了标头属性-

//Login.vue

 const header = {
              headers: {
                  'Authorization': 'Bearer ${accessToken}',
                  'Content-Type': 'application/json',
                  'Access-Control-Allow-Origin': '*',
                  'Access-Control-Allow-Headers': '*',
                  'Access-Control-Allow-Methods': POST, GET, OPTIONS,
                  'Access-Control-Allow-Credentials': true,
                  'Sec-Fetch-Mode': no-cors,
                  'Sec-Fetch-Site': same-site
                  
              },

//App.vue

const header = {
              headers: {
                  'Authorization': `Bearer ${accessToken}`,
                  'Content-Type': 'application/json',
                  'Access-Control-Allow-Origin': '*',
                  'Access-Control-Allow-Headers': '*',
                  'Access-Control-Allow-Credentials': true,
                  'Sec-Fetch-Mode': no-cors,
                  'Sec-Fetch-Site': cross-site,
                  
              },

但是，当我检查代码并在网络标头属性下看到时 -

我如何更改这些标头属性或任何其他方式来解决此 CORS 问题。我只想解决前端问题。目前，我通过禁用安全性chrome.exe --user-data-dir="C://Chrome dev session" --disable-web-security在 Chrome 中运行此应用程序 ，但我想在所有浏览器上运行它，而无需禁用安全性。

得到错误-

任何宝贵的建议都会对我有很大帮助。提前致谢

Answer 1

首先，您不需要客户端的“Access-Control-...”标头。所以你可以删除这些。您只能在服务器端设置 CORS，在您的情况下这是 Vite 服务器。

你在Vite服务器上定义了一个代理，但我认为你在那里犯了一个错误。target 必须是真实 api 服务器的 url，例如https://example.com/realApi。

接下来，在您的 Vue 应用程序中，您需要使用Vite 开发服务器的本地 url来调用 api ，通常http://localhost:3000使用 并用作/api路径。Vite 将重写 url，如下所示：

http://localhost:3000/api/TheApiYouAreCalling --> https://example.com/realApi/TheApiYouAreCalling

有关选项，请参阅 vite 文档server.proxy和node-http-proxy 文档。

希望这可以帮助。

编辑： 如果您在生产中需要代理，您可以相当轻松地使用http-proxy构建一个 node.js 代理。下面的代码是一个示例，您的代理位于/proxy您的服务器上。缺点可能是您需要在服务器上运行node.js。下面的示例使用 http，有关 https，请参阅 http-proxy 文档。

var http = require("http");
var httpProxy = require("http-proxy");

var proxy = httpProxy.createProxyServer({});

const server = http.createServer(function (req, res) {
  if (/^\/proxy\/api/.test(req.url)) {
    req.url = req.url.replace(/^\/proxy\/api/, "");
    proxy.web(req, res, {
      target: "https://example.com/realApi",
      changeOrigin: true,
      secure: false,
    });
  } else {
    res.writeHead(200, { "Content-Type": "text/plain" });
    const response = "Proxy running...";
    res.end(response);
  }
});

server.listen(8080);