Vue的axios的跨域问题

Vue的axios跨域问题

  1. 方法一

    一劳永逸

    在入口文件中添加允许的域名

    $origin_arr = ["开发环境域名","生产环境域名"];
    $origin = $_SERVER['HTTP_ORIGIN'];
    if(in_array($origin, $origin_arr)){
        header("Access-Control-Allow-Credentials: true");
        header("Access-Control-Allow-Origin: {$origin}");
        if(strtolower($_SERVER['REQUEST_METHOD']) == 'options'){
            header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization");
            return 200;
        }
    }

    也可以在apache/nginx/iis的配置中修改,效果相同即可

  2. 方法二

    例如请求http://blog.yuick.com/menu?v=1,需要以下路由配置

  1. 配置config/index.js中的proxyTable

    proxyTable: {
      '/api': {
        target: 'http://blog.yuick.com/',//接口域名和端口号
        changeOrigin: true,//是否跨域
        secure: true, // 允许https请求
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  2. 配置main.js

    import axios from 'axios'
    axios.defaults.baseURL = '/api'
  3. 请求

    mounted () {
      axios
        .get('menu?v=1')
        .then(response => (this.info = response))
        .catch(function (error) {
          console.log(error)
        })
    }
  4. 服务端设置 

    php+apache

    .htaccess文件 允许跨域及cookies

    Header add Access-Control-Allow-Origin "开发环境域名"
    Header add Access-Control-Allow-Credentials true

    入口文件 使OPTIONS请求返回200

    if(strtolower($_SERVER['REQUEST_METHOD']) == 'options'){
        header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization");
        return 200;
    }

标签: vue

发表评论: