我想将 Cors 添加到我构建的这个特定 angular 服务中,我该如何实现?
I'd like to add Cors to this specific angular service that I have built How can I achieve this?
我的 angular 服务基本上会从 api 中检索电影及其详细信息。我相信如果不是这个 cors 问题,它会起作用。我意识到有很多方法可以绕过 cors 但我真的想要基于我已有的最简单的方法。我怎样才能做到这一点?
服务page.ts
import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs';
import { map } from 'rxjs/operators';
//Typescript custom enum for search tpes (optional)
export enum SearchType{
all = '',
movie = 'movie',
series = 'series',
episode = 'episode'
}
@Injectable ({
providedIn : 'root'
})
export class MovieService {
url = 'http://www.omdapi.com/';
apiKey = '*******' //my api key here!
constructor (private http: HttpClient) {}
searchData(title: string, type: SearchType):
Observable<any> {
return this.http.get(`${this.url}?
s=${encodeURI(title)}&type=${type}&apikey=${this.apiKey}`).pipe(
map(results => results['Search'])
);
}
getDetais(id){
return this.http.get(`${this.url}?
i=${id}&plot=full&apikey=${this.apiKey}`);
}
}
这是我从样板中获得的后端。它目前只显示 Api is 运行 on port 9000。我不确定如何将它连接到我的前端,这样 cors 就不是问题了。
main.js
import * as express from 'express';
import {Application} from "express";
import * as cors from "cors";
export function initServer() {
const bodyParser = require('body-parser');
const app:Application = express();
app.use(cors());
app.route("/").get((req, res) => {
res.status(200).send("<h1>API is up and running!</h1>");
});
const PORT = process.env.PORT || 9000;
app.listen(PORT, () => {
console.log("HTTP REST API Server running at port " + PORT);
});
}
恐怕你不能 "get around" CORS。至少不会通过更改 frontend/Angular 应用程序方面的任何内容。如果您的请求因 CORS 而被拒绝(我认为这是问题所在)。您必须在后端而不是前端允许您的域。
我的 angular 服务基本上会从 api 中检索电影及其详细信息。我相信如果不是这个 cors 问题,它会起作用。我意识到有很多方法可以绕过 cors 但我真的想要基于我已有的最简单的方法。我怎样才能做到这一点?
服务page.ts
import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs';
import { map } from 'rxjs/operators';
//Typescript custom enum for search tpes (optional)
export enum SearchType{
all = '',
movie = 'movie',
series = 'series',
episode = 'episode'
}
@Injectable ({
providedIn : 'root'
})
export class MovieService {
url = 'http://www.omdapi.com/';
apiKey = '*******' //my api key here!
constructor (private http: HttpClient) {}
searchData(title: string, type: SearchType):
Observable<any> {
return this.http.get(`${this.url}?
s=${encodeURI(title)}&type=${type}&apikey=${this.apiKey}`).pipe(
map(results => results['Search'])
);
}
getDetais(id){
return this.http.get(`${this.url}?
i=${id}&plot=full&apikey=${this.apiKey}`);
}
}
这是我从样板中获得的后端。它目前只显示 Api is 运行 on port 9000。我不确定如何将它连接到我的前端,这样 cors 就不是问题了。
main.js
import * as express from 'express';
import {Application} from "express";
import * as cors from "cors";
export function initServer() {
const bodyParser = require('body-parser');
const app:Application = express();
app.use(cors());
app.route("/").get((req, res) => {
res.status(200).send("<h1>API is up and running!</h1>");
});
const PORT = process.env.PORT || 9000;
app.listen(PORT, () => {
console.log("HTTP REST API Server running at port " + PORT);
});
}
恐怕你不能 "get around" CORS。至少不会通过更改 frontend/Angular 应用程序方面的任何内容。如果您的请求因 CORS 而被拒绝(我认为这是问题所在)。您必须在后端而不是前端允许您的域。