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

问题描述

首先，我将用户名和密码从 UI (角度)发布到烧瓶

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))
     } 

接下来我从后端收到了它

next i received it from backend

后端错误

所有操作均正常运行，但在控制台上出现了跨源错误

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')

我找不到问题出在哪里

注意:在登录过程中，在相继的步骤中否则会产生交叉原点

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 中的Proxying to a backend server部分>

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

希望这会有所帮助.

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