Vue前端-Flask后台跨域访问问题的处理
生活随笔
收集整理的這篇文章主要介紹了
Vue前端-Flask后台跨域访问问题的处理
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
采用前后端分離的方式開發WEB應用,前端適用了Vue.js,后端用的是Flask。
在使用axios進行前后臺交互時,瀏覽器控制臺報錯:
blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
經查,是跨域訪問限制問題,即瀏覽器發出的前后臺交互請求(指向flask server),與地址欄請求(指向node.js server)不同。
一種比較直接的解決方法是在Flask后臺中,作如下修改:
from flask import Flask from flask_cors import * # 注意這一行-01# 創建webapp應用,__name__是python預定義變量,被設置為使用本模塊. webapp = Flask(__name__) CORS(webapp, supports_credentials=True) # 注意這一行-02# 此處對應了路由文件routes.py中的內容 from app import routes通過flask_cors模塊來處理跨域請求。
另一種可行的方法是將node.js server和flask server都用nginx進行部署,利用nginx的反向代理功能,使瀏覽器發送給前者和后者的請求,都指向nginx,從而將“跨域請求”轉換成“不跨域請求”。這種方法后面再摸索一下。
總結
以上是生活随笔為你收集整理的Vue前端-Flask后台跨域访问问题的处理的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Vue.js教程学习笔记
- 下一篇: Vue中的前后台交互