前言：
当前后台分离开发时，我们经常绕不开跨域的问题，通常我们的解决方法是，在后台在请求头设置过滤，或者jsonp的方式进行，但都有弊端，jsonp只适应get请求，设置请求头可以过滤特定IP，但并不严谨。所以，我尝试在前台进行代理，在网上看了各种文章，各种解决方法后，我自己也尝试了多次，终于解决，所以将自己的解决方法分享给大家。
问题
我需要访问的接口，但接口本身不支持跨域
http://192.168.1.168:8080/portal/services/news/news/class/481.json?pagesize=20&pageindex=1
方法
- 修改config下的index.js文件
默认的代码如下：
dev: {
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
},
所以我们需要在proxyTable对象里搞些事情
dev: {
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/portal': {
target: 'http://192.168.1.168:8080/portal/', // 这里一定要加上http://
changeOrigin: true, //启用跨域
pathRewrite: {
'^/portal': '/'
}
}
}
- 在请求时则可以这样写
export const getnews = (param) => {
//portal一定要写，记得前面斜杠
return axios.get(`/portal/services/news/news/class/481.json?pagesize=20&pageindex=${param}`);
}
- 在调用接口的地方则可以
import { getnews} from '../api/api.js'
//1表示传入的参数
getnews(1).then((res) => {
console.log( res.data.resultInfo.data);
})
