• axios跨域问题


    项目开发过程中遇到了使用axios请求后台接口跨域的问题,网上搜了几种方案都没有解决,最后通过配代理的方式解决了,代码如下:

    报错:

    (因为项目打包后,使用时需要多次修改接口ip,所以我把ip单独定义到了一个文件中)

      1、定义ip接口,在/static/下新建文件夹js,新建文件config.js,即:/static/js/config.js,(static文件夹下的文件打包后是原样输出的)

    // config.js
    // 这段代码是我从网上找到的,其中我用到的字段只有baseURL,其它字段大家任意,有需要的话就定义
    
    window.g = {
        baseURL: 'http://192.168.7.111:8091',    // 配置服务器地址
        mqtt_ip: "39.106.58.252",
        mqtt_port: "61623",
        mqt_user: "bin",
        mqtt_password: "123456"
    }
    

      2、定义config.json,同样是在static文件夹下定义,即:/static/js/config.json,(只要是static文件夹下就行,不一定非要在js下)

    {
        "baseURL": "http://192.168.7.111:8091"
    }
    

      

    注:定义这个文件的原因是,我们要做跨域请求代理,需要修改/config/index.js,修改方式如下:

    // 在index.js中引入config.json
    const configJSON = require('../static/js/config.json');
    const baseURL = configJSON.baseURL;
    
    // 在index.js下找到proxyTable:{},在这进行编辑
    
    proxyTable: {
      '/api': {
            target: baseURL,
            changeOrigin: true,
            pathRewrite: {
                '^/api' : ''
            } 
        }  
    }
    

      3、axios请求

    enableDisableEvent(data) {
        let postData = {
            id: data.id,
            sourceStatic: data.sourceState
        }
    
        axios.post('/api/web/modules/controller/source/dorp/source', {
            params: {
                ...postData,
            }
        })
        .then(res => {
            console.log(res)
        })    
        .catch(err => {
            console.log(err)
        })
    }
    

      注:其中的/api是不能省略的

    参考网址:

      https://www.cnblogs.com/momozjm/p/7993236.html

      https://blog.csdn.net/aliven1/article/details/89927910

    打包完后:

      

  • 相关阅读:
    mysql总结
    JVM入门_笔记_狂神说
    spring-与事务管理相关的工具类
    spring-获取连接的工具类
    浏览器调试之 实时更新 browser-sync
    Git: 版本控件
    Visual Studio Code 自定义快捷键,自动生成.vue文件
    Markdown基本语法
    Node.js 平台-服务器 之 Express
    chrome插件之 vue devtools
  • 原文地址:https://www.cnblogs.com/carriezhao/p/10894747.html
Copyright © 2020-2023  润新知