vue配置前端跨域

vue配置前端跨域

1、初始化vue项目

vue init webpack my-project # 初始化项目
cd my-project # 进入项目路径
cnpm install # 安装依赖
cnpm install axios -S # 安装axios

2、在 src/main.js 中如下声明使用

mport axios from ‘axios’;
Vue.prototype.$axios=axios;

3、在 config/index.js 中的 的dev 添加以下代码，设置一下proxyTable
复制代码

//加入以下
proxyTable:{
‘/api’: {
target : ‘http://127.0.0.1:8000’, //设置你调用的接口域名和端口号.别忘了加http
changeOrigin : true, //允许跨域
pathRewrite : {
‘^/api’:’’
// '‘这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替。
// 比如我要调用’http://127.0.0.1:8000/index/’，直接写‘/api/index/’即可
}
}
},

4、在 config/dev.env.js 中设置以下代码

module.exports = merge(prodEnv, {
NODE_ENV: ‘“development”’, //开发环境
API_HOST:"/api/"
})

5、在 config/prod.env.js 中设置以下代码

module.exports = {
NODE_ENV: ‘“production”’,//生产环境
API_HOST:’“127.0.0.1:8000”’
}

6、说明

1 vue前端结局跨域主要思想是代理功能，比如：
　　　　　　　　　　vue项目：http://localhost:8080/
　　　　　　　　　　后端项目：http://127.0.0.1:8000/

2.在浏览器端访问 http://localhost:8080/api/index/ 路径时，vue会匹配到以 /api/ 开头的请求

3.此时 vue会使用代理功能 自动转发到 http://127.0.0.1:8000/index/ 此时就是同一个域，就不会触发跨域问题

7.首先安装axios
npm install axios
其次在config下的index.js中修改proxyTable

复制代码

proxyTable: {
‘/api’: {
target:‘http://127.0.0.1:8000’,
// secure: false, // 如果是https接口，需要配置这个参数
changeOrigin:true,
pathRewrite:{
‘^/api’: ‘’
}
}
},

最后在main.js中将其注册(注意除了修改src中的文件外，都需要重启npm)

import axios from ‘axios’

Vue.prototype.axios = axios