角度cli和烧瓶之间的交叉原点错误 [英] Cross origin error between angular cli and flask

问题描述

首先我将用户 ID 和密码从 UI(angular)发布到 Flask

first i post the user id and password from the UI(angular) to flask

  public send_login(user){
           console.log(user)
           return 
     this.http.post(this.apiURL+'/login',JSON.stringify(user),this.httpOptions)
    .pipe(retry(1),catchError(this. 
     handleError))
     } 

接下来我从后端收到它

后端错误

所有操作都正常工作，但在控制台上出现了交叉源错误

all the operations are working properly but at console the cross origin error is raising

UI 控制台错误

Ui端的http选项在下面提到

the http option in Ui side is mentioned below

constructor(private http: HttpClient) { }
  // Http Options
  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': 'http://localhost:9000',
      'Access-Control-Allow-Methods': "GET,POST,OPTIONS,DELETE,PUT",
      'X-Requested-With': 'XMLHttpRequest',
      'MyClientCert': '',        // This is empty
      'MyToken': '' 
    })
  }

后端声明的cors如下

the cors declared at backend is metioned below

cors = CORS(app, resources={r"/login": {"origins": "*"}})
 @app.route('/login', methods=['GET','POST'])
 def loginForm():
 json_data = ast.literal_eval(request.data.decode('utf-8'))
  print('\n\n\n',json_data,'\n\n\n')

我无法找到问题出在何处

im not able to find were is the problem is raising

注意:在登录过程中出现交叉原点，否则在后续步骤中

Note: cross origin arising in the time of login process other wise in the consecutive steps

推荐答案

对我来说，调用似乎并没有离开前端(至少在我的经验中是这样)，因为浏览器正在保护这一点.

To me it seems the call is not leaving the front end (at least in my experience it is like this), because the browsers are securing this.

>

在项目的 src/ 文件夹中创建一个新文件 proxy.conf.json.

Create a new file proxy.conf.json in src/ folder of your project.

{
  "/backendApiUrl": {      <--- This needs to reflect the server backend base path
    "target": "http://localhost:9000",    <-- this is the backend server name and port
    "secure": false,
    "logLevel": "debug"    <--- optional, this will give some debug output
  }
}

在文件 angular.json(CLI 配置文件)中，将以下 proxyConfig 选项添加到服务目标:

In the file angular.json (CLI configuration file), add the following proxyConfig option to the serve target:

"projectname": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-application-name:build",
      "proxyConfig": "src/proxy.conf.json"      <--- this is the important addition
    },

只需调用 ng serve 即可使用此代理配置运行开发服务器.

Simply call ng serve to run the dev server using this proxy configuration.

您可以在 https://angular 中阅读代理到后端服务器部分.io/guide/build

You can read the section Proxying to a backend server in https://angular.io/guide/build

希望这会有所帮助.

这篇关于角度cli和烧瓶之间的交叉原点错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！