Question

我必须在我的项目中包含头文件以进行身份验证，但是当我尝试包含它时，它给出了错误错误：无法加载https://od-api.oxforddictionaries.com/api/v1/entries/en/hi：所请求的资源上没有'Access-Control-Allow-Origin'标头。因此，不允许访问来源“ http://localhost:4200”。响应的HTTP状态码为403。

xyz.service.ts

@Injectable({
    providedIn: 'root'
})
export class XyzService {
    word: String = "aardvark";
    constructor(private _http: HttpClient) { }
    private handleError(err: HttpErrorResponse) {
        console.log(err.message);
        return Observable.throw(err.message);
    }
    getDictonaryData(name?): any {
        if (name) {
            this.word = name
        }
        let headers = new Headers();
        headers.append('Accept', 'application/json');
        headers.append('app_id', '*****');
        headers.append('app_key', '7d0740a12*******bc66907835843d6f');


        let myResponse = this._http.get('https://od- 
       api.oxforddictionaries.com / api / v1 / entries / en / ' + this.word);
       return myResponse;

    }
}

app.comoonent.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { XyzService } from './xyz.service';
import { HttpClient } from '@angular/common/http';
import { catchError } from 'rxjs/operators';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    name: string;
    dictData: any;


    constructor(private _route: ActivatedRoute, private router: Router, private 
     xyzService: XyzService, ) { }

    getData() {
        this.xyzService.getDictonaryData(this.name).subscribe(
            data => {

                this.dictData = data;
                console.log(this.dictData);
            },

            error => {
                console.log("some error occured");
                console.log(error.errorMessage);
            }
        );

    }
}

app.component.html

<input id="name" type="text" [(ngModel)]="name" />
<button (click)="getData()"> Get Data </button>

<div class="row" *ngIf="dictData">
    <h2>{{dictData["results"][0]["lexicalEntries"][0]["entries"][0]["senses"][0] ["definitions"]}}

    </h2>
</div>

Answer 1

牛津词典API当前不支持CORS （跨源资源共享）。

相反，他们建议使查询到达用户的服务器端应用程序，然后将API请求从用户的服务器发送到oxford的服务器，而不是直接从客户端发送。

因此不可能直接向其服务器发送API请求。

管理员在Oxford forum discussion中提到了它。

但是您可以轻松地通过服务器绕过您的请求。

对于Apache中的php实现

使用GuzzleHttp轻松实现PHP

对于节点服务器

使用Request或Axios软件包
我为节点服务器的实现添加了解决方案。您可以找到它here

但是我建议不要使用CORS插件或浏览器调整。因为它们会导致安全漏洞，也不能用作永久解决方案

Answer 2

你能这样尝试吗

  let headers = new HttpHeaders();
  headers.set('Accept','application/json');
  headers.set('app_id','4ebde091');
  headers.set('app_key','7d0740a128b7e39bbc66907835843d6f');
  let myResponse = this._http.get('someurl',{
   headers: headers
  });

Answer 3

let headers = new Headers();

应该是

let headers = new HttpHeaders();

由于Headers已被弃用，因此您需要改用HttpHeaders。

有关更多信息，请点击此处-

Answer 4

您可以尝试此解决方案

您正在从本地主机访问实时api，因此域是不同的。

您可以添加此Access-Control-Allow-Origin扩展名

Intall Extension and keep ON

Answer 5

您必须安装扩展程序才能解决此问题。
1.如果您使用的是if (Context.User != null) { ViewState[AntiXsrfUserNameKey] = Context.User.Identity.Name ?? String.Empty; } else { ViewState[AntiXsrfUserNameKey] = String.Empty; }浏览器'Moesif Origin＆CORS Changer'扩展名here
2.如果您使用的是chrome浏览器，则可以从here

安装

角度-包含标题文件

5 个答案: