首先上图:
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