角度2-飞行前的响应具有无效的HTTP状态代码401

Question

我知道这里已经有很多相同的解决问题，
但不幸的是，它们都没有帮助我：-（

这里是我的问题：
我尝试从本地主机连接到服务器上的REST服务。使用FF REST插件可以正常工作，但我的应用程序会导致以下错误：

• 选项 http：//.../my_REST_Service/ 401 （未经授权）
• XMLHttpRequest 无法加载 http：//.../my_REST_Service/。
  印前检查的响应具有无效的 HTTP 状态代码 401

如何获取我想要的数据：

@Injectable()
export class ModelsComponent implements OnInit {

    private restRoot = 'http://.../my_REST_Service';
    private data;

    constructor(private http: Http) { }

    ngOnInit() {
        this.getModels().subscribe(res => {
            this.data = res; 
            console.log(this.data);
        });
    }

    authHeaders() {
        let username: string = 'xxxx';
        let password: string = 'xxxx';

        let token: string = btoa(username + ":" + password);

        let headers: Headers = new Headers();
        headers.append('Access-Control-Expose-Headers', 'Authorization');
        headers.append('Authorization', 'Basic ' + token);
        headers.append("Access-Control-Allow-Origin", "http://localhost:4200/");
        headers.append("Access-Control-Allow-Methods", "*");
        headers.append("Access-Control-Allow-Headers", "Accept,Accept-Charset,Accept-Encoding,Accept-Language,Authorization,Connection,Content-Type,Cookie,DNT,Host,Keep-Alive,Origin,Referer,User-Agent,X-CSRF-Token,X-Requested-With");
        headers.append("Access-Control-Allow-Credentials", "true");

        return headers;
    }

    getModels(): Observable<any> {
        return this.http.get(this.restRoot, {
                    headers: this.authHeaders(), 
                    withCredentials: true        <- from a similar issue
               }).map(res => res.json());
    }
}

我的服务器配置如下：

Header set Access-Control-Allow-Origin "http://localhost:4200"
Header set Access-Control-Allow-Headers "Accept,Accept-Charset,Accept-Encoding,Accept-Language,Authorization,Connection,Content-Type,Cookie,DNT,Host,Keep-Alive,Origin,Referer,User-Agent,X-CSRF-Token,X-Requested-With"
Header set Access-Control-Allow-Methods "*"
Header set Access-Control-Allow-Credentials "true"   
Header set Access-Control-Expose-Headers "Authorization"       <- from a similar issue

我知道还有其他相同/相似的已解决问题。但是我仍然不知道该做什么或者怎么做。如果有人能帮我写代码，我会非常感激！!

Answer 1

在服务器端，如果使用Node.js，可以考虑授权所有选项请求，这样浏览器就不需要验证来检查哪些方法在server/REST API上被授权了。

考虑如下代码：

if (req.method === 'OPTIONS') {
    res.status(200).end();
} else {
    next();
}

Answer 2

浏览器在执行 HttpGet 之前执行 OPTIONS 请求，您需要添加一个与 HttpGet 具有相同路由的终结点，使其成为 HttpOptions 请求，从该终结点中删除身份验证并从中返回 200 OK，这应该可以解决您的问题。

Answer 3

“我的服务器是这样配置的”-这基本上是无关紧要的。查看错误消息：“飞行前的响应具有无效的HTTP状态代码401”

它没有提到任何你提到的访问控制允许的东西。

• 浏览器正在发出选项请求，询问是否允许跨来源请求
• 回复说“您的用户名和密码错误”

由于浏览器尚未收到发出跨域请求的权限：它尚未发送用户名和密码。

您需要在服务器上找到执行授权的代码，并从该测试中排除选项请求。任何人都应该能够提出选项请求，而不仅仅是拥有用户名和密码的人。