如何在Angular 5的标头中添加CORS请求 [英] How to add CORS request in header in Angular 5
问题描述
我在标头中添加了CORS,但我的请求中仍然出现CORS问题.在标头中添加和处理CORS和其他请求的正确方法是什么?
I have added the CORS in header but I am still getting the CORS issue in my request. What is the correct way to add and handle CORS and other requests in the headers?
这是服务文件代码:
import { HttpClient, HttpHeaders, HttpClientModule } from '@angular/common/http';
const httpOptions = {
headers: new HttpHeaders({
'Access-Control-Allow-Origin':'*',
'Authorization':'authkey',
'userid':'1'
})
};
public baseurl = 'http://localhost/XXXXXX';
userAPI(data): Observable<any> {
return this.http.post(this.baseurl, data, httpOptions)
.pipe(
tap((result) => console.log('result-->',result)),
catchError(this.handleError('error', []))
);
}
错误:
对预检请求的响应未通过访问控制检查:所请求的资源上不存在"Access-Control-Allow-Origin"标头.因此,不允许访问' http://localhost:4200 '
失败:(未知网址)的HTTP失败响应:0未知错误
failed: Http failure response for (unknown url): 0 Unknown Error
在我的服务器端代码中,我已经在索引文件中添加了CORS.
In my server-side code, I've added CORS in the index file.
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
推荐答案
以我的经验,这些插件适用于HTTP,但不适用于最新的httpClient.另外,在服务器上配置CORS响应标头并不是真正的选择.因此,我创建了一个proxy.conf.json
文件作为代理服务器.
In my experience the plugins worked with HTTP but not with the latest httpClient. Also, configuring the CORS response headers on the server wasn't really an option. So, I created a proxy.conf.json
file to act as a proxy server.
在此处.
proxy.conf.json
文件:
{
"/posts": {
"target": "https://example.com",
"secure": true,
"pathRewrite": {
"^/posts": ""
},
"changeOrigin": true
}
}
我将proxy.conf.json
文件放在同一目录中package.json
文件的旁边.
I placed the proxy.conf.json
file right next the the package.json
file in the same directory.
然后我修改了package.json文件中的启动命令:
Then I modified the start command in the package.json file:
"start": "ng serve --proxy-config proxy.conf.json"
我的应用程序组件中的HTTP调用:
The HTTP call from my app component:
return this._http.get('/posts/pictures?method=GetPictures')
.subscribe((returnedStuff) => {
console.log(returnedStuff);
});
最后要运行我的应用程序,我必须使用npm start
或ng serve --proxy-config proxy.conf.json
Lastly to run my app, I'd have to use npm start
or ng serve --proxy-config proxy.conf.json
这篇关于如何在Angular 5的标头中添加CORS请求的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!