Vue项目中，使用反向代理解决跨域问题

最新推荐文章于 2024-10-07 23:10:13 发布

qq_40697804

最新推荐文章于 2024-10-07 23:10:13 发布

阅读量2.4k

点赞数

本文链接：https://blog.csdn.net/qq_40697804/article/details/99641719

版权

config --> index.js文件中配置

dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api':{
        target: 'https://api.focues.com', //这个路径是我代理到本地tp框架里面
        changeOrigin: true, //开启代理
        pathRewrite: {
          "^/api" : "/"
        },
      }
    },

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8090, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

    
    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map',

    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,

    cssSourceMap: true
  },

在这里插入图片描述
config --> prod.env.js中配置生产环境地址

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API_HOST: '"https://api.focues.com"' // 生产环境地址
}

在这里插入图片描述
config --> dev.env.js中配置开发环境地址

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_HOST: '"/api/"' // 加上这个开发环境就直接去调用代理了
})

在这里插入图片描述
总接口文件中配置生产模式下和开发模式下的域名，根据开发需要自行调整。

var severUrl = process.env.NODE_ENV === 'production' ? process.env.API_HOST : '/api';

在这里插入图片描述
最后在接口内调用即可。