无法加载http://127.0.0.1:8000/api/users：请求的资源上没有“Access-Control-Allow-Origin”标头

Question

当我想添加一个API Symfony和角度js（前端）的表格我有这个错误可以有人知道为什么？

无法加载http://127.0.0.1:8000/api/users：请求的资源上没有“Access-Control-Allow-Origin”标头。因此，'http://localhost:4200'原产地不允许进入。 AddUserComponent.html：16 ERROR错误：尝试区分“服务器错误”时出错。在NgForOf.webpackJsonp的DefaultIterableDiffer.webpackJsonp ... / .. / .. / core/@angular/core.es5.js.DefaultIterableDiffer.diff（core.es5.js：6843）中只允许数组和可迭代...在checkAndUpdateNodeInline（core.es5.js）的checkAndUpdateDirectiveInline（core.es5.js：10846）的/../../common/@angular/common.es5.js.NgForOf.ngDoCheck（common.es5.js：1691） 12341）checkSendUpdateNode（core.es5.js：12284）at debugCheckAndUpdateNode（core.es5.js：13141）at debugCheckDirectivesFn（core.es5.js：13082）at Object.eval [as updateDirectives]（AddUserComponent.html：21）在Object.debugUpdateDirectives [作为updateDirec

Userservice

 @Injectable()
    export class UserService {
      private uri= 'http://127.0.0.1:8000/api/users';
      constructor(private http: Http, private authenticationService: AuthService  
     ) {}
      addUser(user: User) {
            const  headers = new Headers();
            headers.append('content-type', 'application/json');
            headers.append('Authorization', 'Bearer ' + this.authenticationService.token);
            return this.http.post(this.uri, JSON.stringify(user), {headers : headers})
            .map(res => res.json()).catch(this.handelError);
          }

Answer 1

这是CORS问题。 CORS是在浏览器中实现的安全性。如果您使用角度，则可以通过创建proxy.conf.json文件来充当代理服务器来解决此问题。

{
  "/api*": {
    "target": "http://127.0.0.1:8000",

  },
    "changeOrigin": true
  }
}

然后在package.json中修改npm start命令，如下所示

“start”：“ng serve --proxy-config proxy.conf.json”

您可以在this链接上阅读更多相关信息

Answer 2

这是CORS问题。 CORS是在浏览器中实现的安全性。

这意味着您不能向其他域或端口发出HTTP请求。

在您的情况下，您的应用程序在localhost:4200上运行，但您从localhost:8000请求。因此，这被浏览器阻止。

出于开发目的，您可以使用angular-cli proxy，它允许您在4200端口上建立隧道。

对于生产用途，您应该在CORS安全标头中将服务器列入白名单，或者在同一主机上提供API（例如将/ api映射到后端）。