Vue2.x/Vue3.x跨域问题小白教程

跨域原因Vue2.x版本跨域问题解决proxyTable原理发送请求页面安装axios Vue3.x跨域问题解决发送请求页面

跨域原因

一个网站的js代码段去访问另一个网站时，由于安全原因，跨域访问是被各大浏览器所默认禁止的。浏览器中为了避免跨域使用了同源策略，同源策略就是两个项目具有相同的协议、域名、端口号，如果其中一个不相同则会出现跨域访问的问题。

Vue2.x版本跨域问题解决

proxyTable原理

找到config目录下的index.js文件

proxyTable: { '/api': { target: ' http://127.0.0.1:2018/', //你的后台接口地址 changeOrigin: true, //是否跨域 pathRewrite: { '^/api': '' } } },

发送请求页面

这里我采用axios来发送页面请求,需要提前安装 axios 和 vue-axios 注意: Vue2.x版本只兼容vue-axios 2.x的版本，下载时表明版本号，下方是我适配过的版本号

安装axios

npm install -S axios npm install -S vue-axios@2.1.5

main.js中挂载到Vue上

import Vue from 'vue' import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(animated) Vue.use(VueAxios, axios)

请求页面发送请求, 至此跨域成功！！！

this.axios.post('/api/teachers', data) .then(res => { console.log(res) //服务器返回的数据 })

Vue3.x跨域问题解决

和Vue2.x的处理方法一样，配置proxyTable。

首先需要在当前项目目录下创建vue.config.js文件,文件名是固定是 vue.config.js，加入下面代码

module.exports = { devServer: { open: true, host: 'localhost', port: 8080, https: false, //以上的ip和端口是我们本机的;下面为需要跨域的 proxy: {//配置跨域 '/api': { target: 'http://localhost:5001/',//这里后台的地址模拟的;应该填写你们真实的后台接口 ws: true, changOrigin: true,//允许跨域 pathRewrite: { '^/api': ''//请求的时候使用这个api就可以 } } } } }

发送请求页面

this.axios.post('/api/users', data) .then(res => { console.log(res) //服务器返回的信息 })