vue 解决跨域问题

vue 解决跨域问题

1. 为什么会产生跨域问题

   出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）

2. 在vue项目根目录下查找vue.config.js 文件（如果没有，自行在根目录下创建）

   在文件中写入如下内容

   module.exports = {
   	devServer: {
   		proxy: {
   			'/api': { //使用"/api"来代替"http://f.apiplus.c"
   				target: 'http://localhost:8080/XXXXXXXXXXXXX_exploded/', //源地址 
   				ws: true,
   				changeOrigin: true, //改变源 
   				pathRewrite: {
   					'^/api': '' //路径重写 
   				}
   			}
   		}
   	}
   }
   
   

3. 在使用axios发生请求时，在请求路径前填入如下代码 , 在原有的路径前添加api代码

   axios({
   					method:"post",
   					url:"/api/user/loginpro",
   					data:_this.$data.loginForm
   				})
   

4. 经过以上步骤后，你的跨域文件应该就可以解决了，切记在修改完vue.config.js文件后一定要重启项目