zoukankan      html  css  js  c++  java
  • axios的使用:Vue Cli 3.0+设置跨域

    使用axios时遇到问题

    已拦截跨源请求:同源策略禁止读取位于

    在本地调试访问远程服务器,就有跨域问题,下面以调用豆瓣接口为例:

    解决办法

    3.x 版本对整个项目的构建都有很大的改动,没有原先的config文件夹,没有dev.env.js和prod.dev.js,要自己在根目录建vue.config去配置

    1 创建vue.config.js

    module.exports = {
      devServer: {
        open: true,
        host: 'localhost',
        port: 8080,
        https: false,
        //以上的ip和端口是我们本机的;下面为需要跨域的
        proxy: {  //配置跨域
          '/home': {
             //这里后台的地址模拟的;应该填写你们真实的后台接口
            target: 'http://123.207.32.32:8000/',
            ws: true,
            changOrigin: true,  //允许跨域
            pathRewrite: {
              '^/home': ''  //请求的时候使用这个api就可以
            }
          },
          '/apis': {
            target: 'https://movie.douban.com/',  // target host
            ws: true,  // proxy websockets
            changeOrigin: true,  // needed for virtual hosted sites
            pathRewrite: {
              '^/apis': ''  // rewrite path
            }
          },
        }
      }
    }

    2 srcmain.js

    import axios from 'axios'
    axios.get('http://123.207.32.32:8000/home/multidata').then(res=>{
      console.log(res);
    })
    axios.get('/apis/ithil_j/activity/movie_annual2017').then(res => {
      console.log(res.data)
    }, res => {
      console.info('调用失败');
    })

    成功访问

    附:vue2.0 解决办法:https://segmentfault.com/a/1190000014396546

  • 相关阅读:
    mysql 按出现次数排序
    拼接sql
    java 操作 excel
    jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
    android压力测试命令monkey详解
    java css
    iss 默认上传大小为30 M
    PHP自动生成后台导航网址的最佳方法
    PHP 文件上传的综合实例
    php字符串首字母转换大小写的实例
  • 原文地址:https://www.cnblogs.com/polax/p/13258202.html
Copyright © 2011-2022 走看看