如何解决代理无法解决angular 8中的CORS错误
我遇到了错误
Access to XMLHttpRequest at 'https://samples.openweathermap.org/data/2.5/group?id=1248991,1850147,2644210,2988507,2147714,4930956,1796236,3143244&units=metric&appid=ab8514a074b0dbbe71a9626926b82bf9' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
现在有一段时间,我进行了一些挖掘,发现使用启用了cos的代理可以解决此问题,但是由于某些原因,它对我不起作用。
这是我从中调用请求的方法,
getWeather(city: string[],appid: string) {
this.http.get(
`https://samples.openweathermap.org/data/2.5/group?id=${city}&units=metric&appid=${appid}`)
.subscribe((data) => {
console.log(data);
},(err) => {
console.log(err);
});
}
这是我在src文件夹中创建的proxy.conf.json
{
"/api/*": {
"target": "http://localhost:3000","secure": false
}
}
并且我已经将行"proxyConfig": "src/proxy.conf.json"
添加到我的angular.json中的architect> serve> options
没有编译错误,为什么我仍然收到此错误?
解决方法
实际上,您的代理什么都不做,要使其正常工作,您需要这样做
在environment.ts
中添加apiUrl
并将值设置为/api
在environment.prod.ts
中添加apiUrl
并将值设置为https://samples.openweathermap.org
getWeather(city: string[],appid: string) {
this.http.get(
`${environment.apiUrl}/data/2.5/group?id=${city}&units=metric&appid=${appid}`)
.subscribe((data) => {
console.log(data);
},(err) => {
console.log(err);
});
}
然后在您的代理服务器中
{
"/api/*": {
"target": "https://samples.openweathermap.org/","secure": true,"logLevel": "debug"
"changeOrigin": true,"pathRewrite": {
"^/api/": ""
},}
}
执行此操作时,您的http get将会调用/api/data/2.5/group?id=xxx&units=metric&appid=yyy
然后代理发现有人正在调用以/api
开头的内容,然后由于pathRewrite,它将删除/api/
并将其替换为https://samples.openweathermap.org/
然后,最终网址将为https://samples.openweathermap.org/data/2.5/group?id=xxx&units=metric&appid=yyy
请注意,如果您看到“网络”标签,则会看到网址为localhost:4200
,这是代理如何避免CORS的方式
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。