0

简短的问题是“如何将我的工作http-proxy-middleware方法从开发转移到 AWS Amplify 上的生产环境？” 详情如下：

背景

我有一个传单地图，它通过使用react-leaflet的 Create-React-Application 包装器提供。

我的目标是单击地图并GetFeatureInfo根据单击的位置向公共 WMS 服务发出请求：

https://environment.data.gov.uk/spatialdata/special-protection-areas-england/wms?&service=WMS&version=1.1.1&request=GetFeatureInfo&query_layers=Special_Protection_Areas_England&info_format=text%2Fhtml&srs=EPSG:4326&x=486&y=601&bbox=-0.5260390494613718 ,52.401760738118064,1.6085530989434462,53.529393562701685&height=1165&width=1240

问题

在开发模式下，如果我只是在该位置触发 Axios GET 请求，WMS 服务器会返回 CORS 错误：

在“https://environment.data.gov.uk/spatialdata/special-protection-areas-england/wms?”访问 XMLHttpRequest 来自原点“http://localhost:3000”的 CORS 策略已阻止：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。

我对 WMS 服务器没有任何控制权，因此我无法更改其后端的任何内容。

开发解决方法

我的开发解决方法是使用http-proxy-middleware. 在 setupProxy.js 我有：

const { createProxyMiddleware } = require('http-proxy-middleware');
 
module.exports = function (app) {
  app.use(
    createProxyMiddleware('/defra/', {
      target: 'https://environment.data.gov.uk/', 
      changeOrigin: true,
      pathRewrite: {
        "^/defra": "",
      },
      headers: {
        Connection: "keep-alive"
      }
    })
  );
  
}

我现在可以使用 Axios 向代理 URL 发送 GET 请求并获得响应而不会出现 CORS 错误，因此在 localhost:3000 的开发模式下，一切都按预期工作：

http://localhost:3000/defra/spatialdata/special-protection-areas-england/wms?&service=WMS&version=1.1.1&request=GetFeatureInfo&query_layers=Special_Protection_Areas_England&info_format=text%2Fhtml&srs=EPSG:4326&x=486&y=601&bbox=-0.52603904946137378150494613781 ,1.6085530989434462,53.529393562701685&height=1165&width=1240

如何将此部署到 AWS Amplify？

主要问题是，一旦我将 React 应用程序部署到 AWS Amplify，代理方法就不再有效 - defraURL 中的组件没有代理到https://environment.data.gov.uk，因此查询失败。

根据Create React App repo 上的评论，“代理只是一个开发功能。它不适合生产......代理的概念在那里没有意义，因为没有开发服务器。”

就我而言，我认为我确实需要一个代理来避免 CORS 错误。

如何在 AWS Amplify 上配置应用程序以将 GET 请求代理到 WMS 服务器？

4

0 回答 0