前端VUE解决跨域问题

在vue.config.js配置中添加

devServer:{
    host:'localhost',  // 本地主机
      port:5000,  // 端口号的配置
      open:true,  // 自动打开浏览器
      proxy:{
        '/ftp': {   //  拦截以 /ftp 开头的接口
          target: 'https://skygrpapp.skyworth.com:1888',//设置你调用的接口域名和端口号 别忘了加http
          changeOrigin: true,    //这里true表示实现跨域
          secure: false, // 如果是https接口，需要配置这个参数
          pathRewrite: {
            '^/api':'/'  //这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/api/user/add'，直接写‘/api/user/add’即可
          }
        },
  // 假如又有一个接口是：http://40.00.100.100:3002/get/list/add
  // 那就再配置一个 get的，如下：
        '/get': {   //  拦截以 /get 开头的接口
          target: 'https://skygrpapp.skyworth.com:1888',//设置你调用的接口域名和端口号 别忘了加http
          changeOrigin: true,    //这里true表示实现跨域
          secure: false, // 如果是https接口，需要配置这个参数
          pathRewrite: {
            '^/api':'/'  //这里理解成用‘/api’代替target里面的地址，
          }
        }
      }
  }

全部代码如下

const { defineConfig } = require('@vue/cli-service')
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
 
module.exports = defineConfig({
  configureWebpack: {
    plugins: [new NodePolyfillPlugin()],
    resolve: {
      fallback: { path: require.resolve('path-browserify') }
    }
},
  transpileDependencies: true,
  devServer:{
    host:'localhost',  // 本地主机
      port:5000,  // 端口号的配置
      open:true,  // 自动打开浏览器
      proxy:{
        '/ftp': {   //  拦截以 /ftp 开头的接口
          target: 'https://skygrpapp.skyworth.com:1888',//设置你调用的接口域名和端口号
          changeOrigin: true,    //这里true表示实现跨域
          secure: false, // 如果是https接口，需要配置这个参数
          pathRewrite: {
            '^/api':'/'  //这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/api/user/add'，直接写‘/api/user/add’即可
          }
        },
  // 假如又有一个接口是：http://40.00.100.100:3002/get/list/add
  // 那就再配置一个 get的，如下：
        '/get': {   //  拦截以 /get 开头的接口
          target: 'https://skygrpapp.skyworth.com:1888',//设置你调用的接口域名和端口号
          changeOrigin: true,    //这里true表示实现跨域
          secure: false, // 如果是https接口，需要配置这个参数
          pathRewrite: {
            '^/api':'/'  //这里理解成用‘/api’代替target里面的地址，
          }
        }
      }
  }
})