axios、数组参数和CORS答案

【问题标题】：axios, array parameters and CORSaxios、数组参数和CORS
【发布时间】：2020-05-13 15:41:04
【问题描述】：

我将 axios 与 quasar/vue 一起使用。 axios.post(this.serverUrl, null, {params: {blah: "test"}} params 是第三个参数。我看到它应该是第二名，但是当它是时，我得到了以下信息：

从源“http://localhost:8080”访问“https://example.com”处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：没有“Access-Control-Allow-Origin”标头出现在请求的资源上。

当它是第三个参数时，一切都很好。

在我需要传递一个 json 数组之前，一切都很好，例如： var info = [{name: "test", age: 40},{name: "tester", age: 50}] 不管我尝试了什么，包括使用 qs:axios.post(this.serverUrl, null, {params: {dataToSend: info},paramsSerializer: params => { return qs.stringify(params)} 和另一种解析方法

parseParams(params) {
      const keys = Object.keys(params);
      let options = '';
      keys.forEach((key) => {
        const isParamTypeObject = typeof params[key] === 'object';
        const isParamTypeArray = isParamTypeObject && (params[key].length >= 0);
        if (!isParamTypeObject) {
          options += `${key}=${params[key]}&`;
        }
        if (isParamTypeObject && isParamTypeArray) {      
          params[key].forEach((element) => {
            options += `${key}=${element}&`;
          });
        }      
      });
      return options ? options.slice(0, -1) : options;
    },

我开始收到上面的CORS错误。

我的猜测是解析是错误的，但我无法弄清楚如何克服这个问题，即使在阅读了网络上的这么多示例之后也是如此。我的服务器希望收到一个像上面[{name: "test", age: 40},{name: "tester", age: 50}] 这样的 json 数组，所以我需要客户端这样发送它。我正在使用 axios 0.19.1

我错过了什么？谢谢！

更新：

"/api": {
    target: "https://myrealdomain.com:8443",
    changeOrigin: true,          
    pathRewrite: {
        "^/api": "/mysuffix1/mysuffix2"
    }
}

并调用axios.post("api", {...}) 有效，但在现实生活中，文件将与服务器https://myrealdomain.com 位于同一位置，我不需要API 后缀，只需要mysuffix1/mysuffix2。

我可以在 dev 中模拟 changeOrigin 和 prod 一样吗？

【问题讨论】：

标签： javascript cors axios

【解决方案1】：

如果您计划最终将 Quasar 应用部署在与您调用的 API 相同的域名上，您可以通过配置代理规则来避免在 localhost:8080 上开发期间在此 API 服务器上使用 CORS 规则。当你在开发模式下使用 ...

启动 Quasar

$类星体开发

它启动WebPack Dev server。该服务器可以通过quasar.config.js 进行配置。开发服务器包含一个代理 API，可以通过从您的应用调用 localhost:8080 来调用它，然后将它们转发到 example.com，通过此设置更改 API 请求中的域名：changeOrigin: true。现在，您位于example.com 的 API 服务器看到的请求似乎来自同一个源域，因此不需要 CORS 规则！

devServer: {
  // https: true,
  port: 8080,
  open: true, // opens browser window automatically
 // set up one or more proxy rules
  proxy: {
    // Proxy requests prefixed by /api URL
    "/api": {
      target: "https://example.com",
      changeOrigin: true,  // Avoids the need for CORS rule on your API server
      // Optionally map /api to the same or a different path on the API server
      pathRewrite: {
        "^/api": "api"
      }
    }
  }
},

更多信息请参考...

【讨论】：

最终它将与服务本身安装在同一台服务器上。现在是 localhsot 调用该服务器/服务进行测试阶段。 changeOrigin 仅适用于“类星体开发”模式？我问是因为其他请求有效，只有这个不是，这就是为什么我认为问题出在数组的解析上。
是的……代理规则只适用于quasar dev模式。我确定您已经检查了网络请求/响应值。在 Chrome 调试器中检查网络请求/响应中的 JSON 编码。检查标题（尝试使用 PostMan 或 PostWoman 发送相同的邮件；））。看看您是否可以隔离原因..可能是导致某些问题的代理或您的 API 服务器。如果您启用了 CORS 规则，那么您可能需要允许特定的标头。
我会在我回到电脑前更彻底地检查。昨天我做了检查，参数是，例如：&data=&data=etc... 我的服务器会收到一个json数组吗？如果会的话，我会感到惊讶。 Anwyay，今天晚些时候我将在此处发布更改代理后的请求示例。
devServer: { https: true, // 如果设置为false，则页面加载，如果设置为true，则不加载页面，端口：8080，打开：true，代理：{“/” : { target: "myrealdomain.com:8443/api/api", changeOrigin: true, // 避免在 API 服务器上使用 CORS 规则 pathRewrite: { "^/": "" } } } 我仍然收到相同的 CROS 错误
只是为了确保：客户端在 localhost:8080 上运行并且正在调用 myrealdomain.com:8443/api/api

【解决方案2】：

您必须在 API/Web 服务中启用 CORS。请参阅此问题以获得答案：

Access to XMLHttpRequest at 'API_URL' from origin 'http://localhost:8080' has been blocked by CORS policy:

【讨论】：

那么为什么我所有的其他请求都顺利进行没有问题？我仍然认为这与导致它的解析有关。话虽如此：CORS 只是让 localhost 可以通信？我问是因为 localhost 只是为了测试
您的问题是Access to XMLHttpRequest at 'https://example.com' 。您是否已确认它会发送到预期的服务器？
example.com 是真实域名的占位符。