背景

本地开发时候总会遇上接口跨域问题，不可能每次都让后端设置接触跨域限制，因为后端也会有安全性的考量。

那么就只有在本地搭建proxy服务实现请求转发了。不然本地开发没办法调试接口。

安装 @nuxtjs/proxy

//yarn方式安装
yarn add  @nuxtjs/proxy -D
//npm方式安装
npm i  @nuxtjs/proxy -D

nuxt.config.js 配置

  proxy: {
    '/api': { // 拦截 /api的请求
      target: '需要转发的目标域名', // 只能填写域名
      pathRewrite: {
        '^/api': '/api', // 匹配到/api后 替换成/api
      },
    },
  },

axios配置

    proxy:true, //官方示例需要，但是不加也没问题
    baseURL:'' //必须不配置baseURL才会触发代理

场景1：针对全局配置

就是针对整个项目访问的/api前缀的请求代理

import axios from 'axios'
const service = axios.create({
  proxy:true, //官方示例需要，但是不加也没问题
})

场景2：针对某个接口跨域转发

例如有一个接口是第三方的接口，需要在项目使用，但是这个接口是跨域的。只想针对这个接口配置跨域。

export function apiDemo(params) {
  return request({
    url: `/api/getDemoTitle`,
    method: 'get',
    params,
    proxy:true,
    baseURL:''
  })
}

配置好后，只有访问/api/getDemoTitle的时候才会触发代理规则