我想将 Cors 添加到我构建的这个特定的 Angular 服务中我该如何实现? [复制]

Posted

技术标签:

【中文标题】我想将 Cors 添加到我构建的这个特定的 Angular 服务中我该如何实现? [复制]【英文标题】:I'd like to add Cors to this specific angular service that I have built How can I achieve this? [duplicate] 【发布时间】:2020-08-12 15:11:08 【问题描述】:

我的角度服务基本上是从 api 中检索电影及其详细信息。我相信如果不是这个 cors 问题它会起作用。我意识到有很多方法可以绕过 cors,但我真的想要基于我已有的最简单的方法。我怎样才能做到这一点?

服务页面.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 正在端口 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);
);


【问题讨论】:

如果您遇到 CORS 问题,显示客户端代码有什么意义?如果您不拥有 API,您可能需要某种代理。 我遇到的问题是请求的资源上没有“Access-Control-Allow-Origin”标头。如何将此标头添加到我请求的资源中 @jonrsharpe 我认为这是标题问题 【参考方案1】:

恐怕您无法“绕过”CORS。至少不要通过更改前端/Angular 应用程序一侧的任何内容。如果您的请求因 CORS 而被拒绝(我认为这是问题所在)。您必须在后端而不是前端允许您的域。

【讨论】:

问题是请求的资源上没有“Access-Control-Allow-Origin”标头。如何将此标头添加到我请求的资源中 我认为这是标题问题 该错误很可能意味着您的后端尚未设置为允许来自该域的请求。您能否提供一些关于您使用什么作为后端的信息? 这是我的 server.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) =&gt; res.status(200).send("&lt;h1&gt;API is up and running!&lt;/h1&gt;"); ); const PORT = process.env.PORT || 9000; app.listen(PORT, () =&gt; console.log("HTTP REST API Server running at port " + PORT); ); 你能把这个添加到你的问题中吗?作为评论很难阅读

以上是关于我想将 Cors 添加到我构建的这个特定的 Angular 服务中我该如何实现? [复制]的主要内容,如果未能解决你的问题,请参考以下文章

我想将控制器添加到我的 ASP.NET MVC 项目中,但出现错误

Angular 7 - 添加自定义 babel 插件来构建链

带有下拉列表的android按钮小部件,这个特定小部件的名称是啥?

我想将firebase添加到我的flutter应用程序中,但是当我设置它时,VS Code中有很多错误

如果我在另一个下拉列表中选择特定值,我想将值添加到下拉列表

如何使用“使用方法”将 CORS 添加到我的中间件