Vue3通过axios解决跨域问题 |
您所在的位置：网站首页 › vue3配置跨域 › Vue3通过axios解决跨域问题 |
Vue3通过axios解决跨域问题
|
实现跨域共3个步骤： 1，vue3.0根目录下创建vue.config.js文件； module.exports = { devServer: { proxy: { '/api': { target: 'https://you.163.com/', //接口域名 changeOrigin: true, //是否跨域 ws: true, //是否代理 websockets secure: true, //是否https接口 pathRewrite: { //路径重置 '^/api': '' } } } } };2，将上述代码块写入其中； 如图：
3，将api接口放入请求的url中； 使用页面的代码块： TEST{{data}} import axis from 'axios'; export default { name: 'Test', data() { return { data: {}, }; }, methods: { getData() { axis.get('/api/xhr/search/queryHotKeyWord.json')//axis后面的.get可以省略； .then( (response) => { console.log(response); this.data = response; }) .catch( (error) => { console.log(error); }); }, }, mounted() { this.getData(); }, };代码解析：
浏览器页面：
剩下的就是把数据渲染到页面了。 实际示例 vue3 8080端口请求flask8081端口服务数据： module.exports = { devServer: { host: '0.0.0.0', port: 8080, open: true, proxy: { '/api/testcase/': { target: 'http://127.0.0.1:8081/', //接口域名 changeOrigin: true, //是否跨域 ws: true, //是否代理 websockets secure: true, //是否https接口 pathRewrite: { //路径重置 '^/api/testcase/': '/api/testcase/' } } }, }, }flask接口地址: # http://127.0.0.1:8081/api/testcase/@app.route('/api/testcase/')def alltestcase(): pass 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。 |
【本文地址】
今日新闻 |
推荐新闻 |