zoukankan      html  css  js  c++  java
  • vue-cli3以上框架解决跨域问题

    事实上,3以上的版本安装好以后没有主配置文件,它不像2的版本有专门的config文件夹可以处理配置,所以我们需要新建vue.config.js  【默认情况下,3以上的版本可以直接识别这个js文件,把它当做自己的配置文件】

    步骤如下:

    1、在项目框架的根目录下新建文件:vue.config.js

    2、重启项目,这样的话新建的文件就可以被识别了

    3、给新建的文件内添加解决跨域的代码部分

    module.exports = {
        outputDir: 'serve',   //build输出目录
        assetsDir: 'assets', //静态资源目录(js, css, img)
        lintOnSave: false, //是否开启eslint
        devServer: {
            open: true, //是否自动弹出浏览器页面
            host: "localhost", 
            port: '8081', 
            https: false,   //是否使用https协议
            hotOnly: false, //是否开启热更新
            proxy: {
                 '/api': {
                    target: 'http://www.1707laravel.com/api', //API服务器的地址
                    ws: true,  //代理websockets
                    changeOrigin: true, // 虚拟的站点需要更管origin
                    pathRewrite: {   //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
                        '^/api': ''
                    }
                }
            }
        }
    }

    配置好以后就可以执行请求了,例如post请求是:

    this.$axios.post('/api/register',{
         name:this.user_name,
         email:this.user_email,
         pwd:this.user_pwd,
         rpwd:this.user_rpwd,
         phone:this.user_phone,
         sex:this.user_sex
     })
      .then(function (res) {
          console.log(res);
      })
  • 相关阅读:
    2019-12-2 异常捕获
    类与类之间的6种关系
    关键字与理解
    this与super的语法比较
    单继承与多继承对比
    为什么javaBean要有get/set方法的设计
    多态在面向对象中的意义以及带来的好处
    十四、线程设计
    十三、窗口设计
    十二、SWING界面设计
  • 原文地址:https://www.cnblogs.com/jiangshiguo/p/12122120.html
Copyright © 2011-2022 走看看