Cross origin error between angular cli and 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))
     }

next i received it from backend

backend error

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

Error at UI console

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

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

回答1:

add below code in your app.py

CORS(app, supports_credentials=True)

and from frontend use

{with-credentials :true}

it will enable the communication between the frontend and backend

回答2:

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.

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

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

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

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

Hope this helps.

来源：https://stackoverflow.com/questions/60318355/cross-origin-error-between-angular-cli-and-flask

标签

python-3.x