Angular-被CORS策略阻止:"Access-Control-Allow-Origin"标头包含多个值"*，*" [英] Angular - blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values '*, *'

问题描述

当我尝试连接到另一个域中的REST服务时遇到错误.我了解可以通过在Java rest服务中添加CORS来解决.但是可以通过在Angular侧面进行更改来实现吗?

Getting error when I try to connect to a REST service that is in another domain. I understand it can be resolved by adding CORS in java rest service. But can it be possible by changing something in Angular side?

Access to 'http://someurl/RestWeb/getPerson' XMLHttpRequest at from origin 'http://localhost:4200' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values '*, *'

我的休息服务:http://someurl/RestWeb/getPerson，我所有的休息服务网址都类似于:http://someurl/RestWeb/SOMETHING

My Rest service: http://someurl/RestWeb/getPerson, all my rest service urls are like: http://someurl/RestWeb/SOMETHING

我的Angular网址:http://someotherurl

And my Angular url: http://someotherurl

在搜索其他文章之后，我已经尝试更改 proxy.conf.json 和 package.json .在我的更改下面，我还是一样.

After searching different articles, I already tried changing proxy.conf.json and package.json . Below re my changes, still I am getting same.

proxy.conf.json

proxy.conf.json

{
  "/RestWeb": {
    "target": "http://someurl/",
    "secure": false,
    "changeOrigin": true  // I tried with and without this. No luck
  }
}

package.json

package.json

"start": "ng serve --proxy-config proxy.conf.json",

服务:

  findAll(): Observable<Person[]> {
    return this.httpClient.get<string[]>('http://someurl/RestWeb/getPerson');
  }

运行方式:

npm start

作为临时对策，现在我正在使用chrome浏览器测试我的应用程序

As temporary counter measure, now I am testing my application in chrome browser using

chrome.exe --user-data-dir="C://Chrome dev session" --disable-web-security

解决方案

{
  "/RestWeb/*": {
    "target": "http://someurl",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

推荐答案

似乎webpack-dev-server的代理被滥用了.

It seems that webpack-dev-server's proxy misused.

proxy.conf.json

{
  "/api": {
    "target": "http://someurl.com/",
    "changeOrigin": true,
    "secure": false,
    "pathRewrite": {
      // replace `/api` with empty string, because real api path isn't contain 
      // `/api` segment
      // eg: http://localhost:4200/api/getPerson => http://someurl.com/getPerson
      "/api": ""
    }
  }
}

person.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable()
export class PersonService {
  constructor(private http: HttpClient) {}

  async getPerson() {
    return (
      this.http
        // you shouldn't use `http://someurl.com/getPerson` url directly,
        .get('/api/getPerson')
        .toPromise()
    );
  }
}

这篇关于Angular-被CORS策略阻止:"Access-Control-Allow-Origin"标头包含多个值"*，*"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！