webpack实现跨域请求接口

前言：

当前后台分离开发时，我们经常绕不开跨域的问题，通常我们的解决方法是，在后台在请求头设置过滤，或者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);
})