Question

当我尝试将值从一台服务器传递到另一台服务器时，由于“从源'http://localhost:8082/kanchiwork/'访问'http://localhost:4200'的XMLHttpRequest已被CORS策略阻止”而出现错误。我的.ts文件代码

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

@Injectable({
  providedIn: 'root'
})
export class PeopleService {

  constructor(private http:HttpClient) { }

  fetchPeople(): Observable<Object>{
    return this.http.get('http://localhost:8082/kanchiwork/');
    //return this.http.get('assets/response.json');
  }

}

好像我将json文件（response.json）放在Assets文件夹中一样，它工作正常。我已按照下面URL中“使用公司代理”标题下的说明进行操作，但是仍然存在问题。网址：https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

Answer 1

对于开发，您可以定义一个proxy.dev.conf.json文件来管理Angular cli的请求。例如：ng serve --open --proxy-config ./proxy.dev.conf.json

// config

[
  {
    "context": [
      "/api/**"
    ],
    "pathRewrite": {
      "^/api": ""
    },
    "ws": false,
    "target": "http://localhost:8082",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }
]

// the service file
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class PeopleService {

  constructor(private http:HttpClient) { }

  fetchPeople(): Observable<Object>{
    return this.http.get('/api/kanchiwork/');
    //return this.http.get('assets/response.json');
  }

}

Answer 2

Venkat，这不是您的错，因为后端使用允许在他这一边使用跨源功能，因此前端不会出现CORS错误。

当您使用不同的网址或跨网域之类的端口时，就会发生错误。

Answer 3

通常为CORS错误意味着-跨源资源共享，它可以帮助我们阻止来自不必要源的请求，从而提高了我们应用程序的安全性，后端develepors应该允许您的网址，

例如：如果您的后端是在节点js中开发的，请您的团队添加此代码

var allowCrossDomain = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', 'example.com');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');

    next();
}

//...
app.configure(function() {
    app.use(express.bodyParser());
    app.use(express.cookieParser());
    app.use(express.session({ secret: 'cool beans' }));
    app.use(express.methodOverride());
    app.use(allowCrossDomain);
    app.use(app.router);
    app.use(express.static(__dirname + '/public'));
});

Answer 4

@xsong提出的proxy.conf路径是正确的，您只需要稍微调整一下即可。第一：不要在应用程序本身中对API路径进行硬编码（无论代理/无代理/ CORS /无CORS，无论如何都是好习惯），请将其放入environment.ts文件中。对于开发人员构建，您可以将其简单定义为apiUrl: "/api"。

然后，在您的服务中导入环境，并通过${environment.apiUrl}/the-rest/of-the-path发送您的请求。第三部分，您可能需要在proxy.conf中重写路径：

  {
    "context": [
      "/api/**",
    ],
    "target": "http://localhost:8082",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug",
    "pathRewrite": {
       "^/api": ""
    }
  }

Answer 5

通过将文件更新为以下文件来工作。在proxy.config.json中，我将代码更新为

{
  "/api": {
    "target": "http://localhost:8082",
    "secure": false
  },
  "logLevel": "debug"    
}

和在服务文件中

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

@Injectable({
  providedIn: 'root'
})
export class PeopleService {

  constructor(private http:HttpClient) { }

  fetchPeople(): Observable<Object>{
    return this.http.get('/api/kanchiwork/');
    //return this.http.get('assets/response.json');
  };

}

此代码对我有用，感谢@xsong的建议。

CORS策略已阻止从来源“ http：// localhost：4200”访问“ http：// localhost：8082 / kanchiwork /”处的XMLHttpRequest

5 个答案: