浏览器跨域问题 配置反向代理

Vue2做项目

浏览器一直报跨域问题 

在request中 把baseURL 改成 “/api”

import axios from 'axios'
const request = axios.create({
  baseURL: '/api',//这边本来直接写的是请求的baseURL 改成代理接口 随便写一个
  timeout: 3000
})

在Vue.config.js里面 配置 devServe 反向代理

devServer: {
      port: '8008',
      open: 'true',
      host: 'localhost',
      // 配置反向代理
      proxy: {
        '/api': {
          target: 'http://110.42.202.109:3000', // 标接口的路径  这边通过代理转发会自动拼接target
          changeOrigin: true,
          pathRewrite: {
            '^/api': ''
          }
        }
      }
    },

这边有一个需要理解的点是 反向代理的拼接

baseURL 写的是 '/api' 并且对它做反向代理

''http://110.42.202.109:3000'写的是 ''http://110.42.202.109:3000'

那么到这一步 实际发送请求的地址是 target+ ’/api‘+’前端请求的接口 即url‘

如果要这样做 得看实际我们发请求得时候得接口有没有/api

但是这边’/api‘是我自己配置得 实际接口中是没有的 所以需要pathRewrite 把它变成空

这样 拼接出来的接口就是 ''http://110.42.202.109:3000'+ ’前端请求的接口 即url‘

举个发请求的接口例子

export const getRecommendListAPI = (limit = 1) => {
  return request({
    url: '/personalized',
    params: {
      limit
    }
  })
}