Question

我在Angular 2中尝试连接到eI没有访问服务器端的API。我知道这个API和令牌是可行的因为我将现有的PHP应用程序转换为Angular。

这是myapp.service.ts

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class DxdService {

    private apiUrl = 'https://path/to/my/api/';

    constructor(private _http: Http){

    }

    createAuthorizationHeader(headers: Headers) {
        headers.append('X-Auth-Token','myvalidkey'); 
    }

    getValueFromApi(){
        let headers = new Headers();
        this.createAuthorizationHeader(headers);
        return this._http.get(this.apiUrl, headers)
        .map(res => res.json());
    }
}

这一回报总是

GET https://path/to/my/api/ 401 (Unauthorized)

XMLHttpRequest cannot load https://path/to/my/api/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:3000' is therefore not allowed access. The response had HTTP status code 401.

我在这里无法弄清楚的是，我设置标题的方式x-auth-token是错误的，还是我再次讨论Access-Control-Allow-Origin CORS问题。

考虑到我无法访问服务器端来更改Access-Control-Allow-Origin标头响应，如果我设置标头的方式是正确的，我该如何继续在本地开发？

Answer 1

您无法从前端视角解决此问题，您需要访问服务器以进行适当调整并使其可从Angular应用程序访问

您可以尝试在请求中实现JSONP作为方法。请记住，JSONP仅适用于GET

$http({
    method: 'JSONP',
    url: url
}).
success(function(status) {
    //your code when success
}).
error(function(status) {
    //your code when fails
});

您可以找到与此问题相关的更多答案here

在运行本地时使用X-Auth-Token连接到API

1 个答案: