通过“https://***”从源站访问XMLHttpRequesthttp://localhost:3000'已被CORS策略阻止

Question

我正试图用axios发送请求，但我有CORS问题，这是我的nuxt.config.js

plugins: [
"@/plugins/axios/apiService.js",
],
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy',
  ],
  
  axios: {
    baseURL: process.env.API_URL,
    proxy: true,
    credentials: false
  },
  proxy: {
    '/api': {
      target: 'https://dev.mobit.ir/api/web/v4',
      pathRewrite: {
        '^/api' : '/'
        },
      changeOrigin: true,
      }
  },

这是我的服务

import axios from "axios";
import { API_URL} from "./config";

export const axiosInstance = axios.create({
  headers: {
    Accept: 'application/json',
  }
});

//Set base url for axios requests
axiosInstance.defaults.baseURL = API_URL;

export const ApiService = {
  
  //resource: api address
  get(resource, params = "") {
    return axiosInstance.get(resource, {params}).catch(error => {
      throw new Error(`[RWV] ApiService ${error}`);
    });
  },

  post(resource, params) {
    return axiosInstance.post(`${resource}`, params);
  }
};

我试图根据nuxt文档设置代理，但如果我使用类似https://cors-anywhere.herokuapp.com/ 它会起作用，但nuxt代理为什么不起作用呢？我认为这不是正确的方法。我必须使用cookie还是中间件？

Answer 1

在这种类型的CORS中，使用像下面链接这样的扩展可以解决问题，直到在主域中发布它为止

https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=en#:~:text=Allow CORS:Access-Control-Allow-Origin允许您，默认情况下（在JavaScript API中）。

Answer 2

根据下面的链接，我们应该在模块的数组中使用一个数组来定义代理，如下所示：

['@nuxtjs/proxy'，{pathRewrite:{'^/api':'/api/web/v4'}}]

链接阅读更多信息：https://github.com/nuxt-community/proxy-module