Vue+Flask - 解決Access-Control-Allow-Origin跨域請求問題

首先上圖：

Fn+F12或者F12，選擇Network再查看Headers

 

 

 查閱了大量blog后解決了vue前端跨域問題，status code變成了200ok，但是response仍然沒有數據，才發現后端也要解決跨域問題（我麻了呀）

Vue前端解決跨域問題

附上代碼：

.env.development文件

VUE_APP_BASE_API = '/dev-api'

vue.config.js文件，修改devServer:

devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      ["/dev-api"]:{
            target:'http://127.0.0.1:5000',
              changeOrigin:true,
                pathRewrite: {
                    ['^' + "/dev-ap"]: ''
                }
            }
    },
    after: require('./mock/mock-server.js')
  },

查詢時的url設置成'/teacher/edit'就好了，不需要添加/dev-api，在pathRewrite中已經抵消了

修改后查詢的鏈接會自動改成如下：

Request URL:http://127.0.0.1:5000/teacher/edit

但是此時仍要解決后端跨域問題

 

Flask解決跨域問題

我直接修改的__init__.py文件

添加了如下代碼

from flask import Flask
from App.api import init_api
from App.ext import init_ext
from App.settings import envs
from flask_cors import CORS#添加的

def create_app():
    app = Flask(__name__)
    CORS(app,resources=r'/*')#添加的
    app.config.from_object(envs.get("develop"))

    init_ext(app)
    init_api(app)

    return app

更多有關flask-cors模塊的用法可參考：https://flask-cors.readthedocs.io/en/latest/

 

參考文檔：

https://www.jianshu.com/p/43aa317d7683

 

https://blog.csdn.net/weixin_42902669/article/details/90728697