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