vue跨域问题解决(生产环境)

时间:2023-03-10 05:09:16
vue跨域问题解决(生产环境)

vue跨域问题解决(使用webpack打包的)

  • 配置代理:(config下index.js文件)

    module.exports = {
    dev: {
    env: require('./dev.env'),
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    //在dev中添加下面的块
    proxyTable: {
    '/api': {
    // target: 'http://47.100.34.99', //目标接口域名
    target: 'http://10.230.152.141:8080/',
    changeOrigin: true, //是否跨域
    secure: false,
    pathRewrite: {
    '^/api': '' //重写接口
    }
    },
    cssSourceMap: false
    },
    ...
    }
  • 配置main.js

    import axios from 'axios'
    // 设置axios请求的token
    axios.defaults.headers.common['token'] = 'f4c902c9ae5a2a9d8f84868ad064e706'
    axios.defaults.headers.post['Content-type'] = 'application/json;charset=UTF-8'
  • 使用

    this.$axios.post("/api/greeting", {
    
                  username: self.name,
    password: self.password,
    email: self.email,
    sex: self.select
    })
    .then(function(res) {
    alert(res.data+",,,,success")
    })
    .catch(function(error) {
    }

注:目前只在生产环境测试了,可以跨域

参考博文:https://blog.csdn.net/u012369271/article/details/72848102