跨域问题Responsetopreflightrequestdoesn'tpassaccesscontrolcheck:No'Access-Control-Allow-Origin
程序员文章站
2022-06-25 08:11:11
场景:前端跟后台联合开发的时候,在局域网内,访问别人的地址可以获取数据,但是通过接口请求,就会跨域
解决方法:现在是vue项目,用axios请求,前端这边单独解决这个问题,不需要后端处理
第一、找到...
场景:前端跟后台联合开发的时候,在局域网内,访问别人的地址可以获取数据,但是通过接口请求,就会跨域
解决方法:现在是vue项目,用axios请求,前端这边单独解决这个问题,不需要后端处理
第一、找到config/index.js
设置proxytable,实际上就是设置代理路径(ps:设置config文件之后,需要重新npm run dev)
dev: { env: require('./dev.env'), port: 8080, autoopenbrowser: true, assetssubdirectory: 'static', assetspublicpath: '/', proxytable: { '/api': { target: '请求地址ip加端口', changeorigin: true, pathrewrite: { '^/api': '/' } } }, }
第二,新建一个封装axios的文件,如 src/api/index.js,如果不封装,上面的代理将不能识别,原因暂时不知,
里面就是封装的接口方法
//输出通用axios实例 import axios from 'axios'; const instance = axios.create({ timeout: 10000, headers: { 'content-type': "application/json;charset=utf-8" } }); export default { userlogin ( data ) { return instance.post('/api/user/login', data); }, alluser () { return instance.post('/api/user'); }, allproduct () { return instance.post('/api/product') }, upload (data) { return instance.post('/api/upload',data) }, regist (data){ return instance.post('/api/createorupdateuser',data) } };
第三、在main.js引用
import instance_ from './api/index';
vue.prototype.instance = instance_ //axios实例
第四,就可以调用自己定义的接口了,如
this.instance.regist({ userid: '', username: this.username, }).then(res=>{ console.log("sd") }).catch(function (error) { console.log(error); });
上一篇: 详解MVC中为DropDownListFor设置选中项的方法
下一篇: 一菜一炒很少见了