CORS 错误 Angular 2 + Express 节点

Posted 2023-03-04

【中文标题】CORS 错误 Angular 2 + Express 节点

【英文标题】：CORS error Angular 2 + Express Node

【发布时间】：2018-03-27 06:09:53

【问题描述】：

正面（角度 2）

public googlesearch(ev:Event)
    this.http.get("https://maps.googleapis.com/maps/api/place/autocomplete/json?input="+ev.target.value+"&types=establishment&key=AIzaSyAKdEt_dYbdPY-CFo0zie23E44XxTQc1n7").map(res => $.parseJSON(res)).subscribe( data => 
      this.predictions = data.predictions;
      console.log(this.predictions);
     ,(error) => 
       alert('Not able to get')
       )


      

节点（Express 4.14）

var app = express();
app.use(function(req, res, next) 
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
);

但我遇到了 CORS 错误

加载失败 https://maps.googleapis.com/maps/api/place/autocomplete/json?input=loc&types=establishment&key=AIzaSyAKdEt_dYbdPY-CFo0zie23E44XxTQc1n8: 请求中不存在“Access-Control-Allow-Origin”标头 资源。因此不允许使用原点“http://localhost:3000” 访问。

并且在 npm 控制台上也没有收到任何请求。

【参考方案1】：

有一个 api 可以以更清洁的方式进行 通过脚本标签导入 google map api

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initService"
    async defer></script>

现在从自动完成 API 声明一个服务

function initService()
   autoService = new google.maps.places.AutocompleteService();

在你的事件监听器中这样做

autoService.getQueryPredictions( input: event.target.value , displaySuggestions);

关注完整示例https://developers.google.com/maps/documentation/javascript/examples/places-queryprediction

编辑

如果你想从你的 express 应用程序中执行此操作，可以使用 npm

https://www.npmjs.com/package/googleplaces

为什么从 app.js 设置后出现 cors 错误

因为在前端，您使用 maps.google.com 网址调用 http 服务获取方法，所以浏览器绝不会联系您的服务器，它会直接转到 google 服务器尝试检索内容，所以在这种情况下，您在 app.js 中的配置毫无用处，除非您在 Angular 中定义代理。

【讨论】：

如何使用自己不同的服务器服务？

你到底想要什么？你想表达对google api的请求，这样你就可以从角度控制器调用你自己的服务，而这个调用googleApi

我想知道原因，为什么在服务器 app.js 启用 cors 后，我无法得到响应。前端有什么拒绝它的吗？

【参考方案2】：

该标头必须由目标 url 服务器设置，https://maps.googleapis.com/ 在您的情况下。在您的服务器上设置标头将无济于事。

你可以，但是-

找到允许从浏览器调用的适当 api。 在您的服务器上实现该 url 的代理并从浏览器调用它。

【讨论】：

请解释一下。