运行在调用 Google 地图时进入 COORS API

Question

我在我的 React 应用程序中使用 webpack-dev-middleware。当我在 index.html 中提供 google 地图资产时，效果很好，但是，我想使用 axios 在 React 组件中获取这些资产，当我这样做时，我收到以下错误：

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

我已经尝试在 webpack-dev-middleware 内设置这些设置，但我仍然遇到同样的问题：

webpackDevMiddleware(bundler, {
    ...
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, OPTIONS, PUT, PATCH, DELETE',
      'Access-Control-Allow-Headers': 'X-Requested-With,content-type',
      'Access-Control-Allow-Credentials': true
    }
  }),

Answer 1

所以我找到了几个成功的解决方案：

1) 我动态创建了一个指向 google 映射目标的脚本文件并将其注入到 DOM

const script = document.createElement('script'); script.setAttribute('src', 'https://maps.googleapis.com/maps/api/js?key=.....'); document.body.appendChild(script);

2) 在意识到我基本上是在重建 JSONP 正在做的事情后，我选择使用 JSONP 方法，您可以使用 jquery axios 方法或使用类似的模块jsonp.

运行在调用 Google 地图时进入 COORS API

Running into COORS when calling Google Maps API

cross-domain

webpack

browser-sync

axios

运行 在调用 Google 地图时进入 COORS API

Running into COORS when calling Google Maps API

cross-domain

webpack

browser-sync

axios

运行在调用 Google 地图时进入 COORS API