参考:http://www.ruanyifeng.com/blog/2016/04/cors.html

  • 遇到前后分离情况

    • 前端 a.com
    • 后端 server.a.com

       

  • 环境

    • vue全家桶前端 php后端lumen5.5

                  

  • 解决

    • 首先请求代码
    • return new Promise((resolve, reject) => {
      http.post(api.ADMIN_USER_LOGIN, userinfo).then(
      response => {
      //
      if(response.data.status === configs.status.SUCCESS) {
      commit(types.SET_USER, response.data.userinfo)
      resolve(response)
      }else {
      reject(response)
      } },
      (err) => {reject(err.response)}
      )
      });

      请求后浏览器报错

      Failed to load http://server.a.com/xxxx: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://a.com' is therefore not allowed access. The response had HTTP status code 500.
    • 百度后发现此类请求已经归为非简单请求,了解原理后后端作出相应修改

       $router->options('/{origin:.*}', function(){
      $self_web = 'http://a.com'; if(isset($_SERVER['HTTP_ORIGIN']) && $_SERVER['HTTP_ORIGIN'] === $self_web) {
      header('Access-Control-Allow-Origin: '.$self_web); $method = strtoupper($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']);
      if(in_array($method, ['PUT', 'POST', 'GET'], true)) {
      header('Access-Control-Request-Method: '.$method);
      } $content_types = explode(',', $_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']);
      if($content_types) {
      $content_types = array_map(function($type){
      return ucwords($type, '-');
      }, $content_types); if(count(array_diff($content_types, ['X-Requested-With', 'Content-Type'])) === 0) {
      header("Access-Control-Allow-Headers: ".implode(',', $content_types));
      }
      }
      }
      });
  • end

                    

axios跨域的更多相关文章

  1. vue-cli axios跨域 + 反向代理模拟http请求host+referer

    axios跨域 配置config->index.js中的proxyTable,内容如下: proxyTable: { // 跨域请求 '/api': { // 注意此处可设置为 '*' 代表不限 ...

  2. $Django 前后端之 跨域问题(同源策略) vue项目(axios跨域请求数据)

    1 跨域问题(多个域之间的数据访问) #同源策略(ip port 协议全部相同) #本站的只能请求本站域名的数据 #CORS实现(跨域资源共享) #实现CORS通信的关键是服务器.只要服务器实现了CO ...

  3. Vue用axios跨域访问数据

    Vue用axios跨域访问数据axios是vue-resource的替代品,vue-resource不再维护.安装axios:npm install axios使用vue-cli开发时,由于项目本身启 ...

  4. 使用ajax请求接口,跨域后cookie无法设置,全局配置ajax;及使用axios跨域后cookie无法设置,全局配置axios

    问题一: 使用ajax/axios跨域请求接口,后端放行了,能够正常获取数据,但是cookie设置不进去,后端登录session判断失效 ajax解决办法: //设置ajax属性 crossDomai ...

  5. axios 跨域配置

    axios跨域设置 找到项目config文件夹下的index.js文件,将dev中的proxyTable项中添加配置 proxyTable: { '/api': { target: 'https:// ...

  6. axios跨域问题(包括开发环境和生产环境)

    之前写过一篇axios跨域问题,写的过于片面,没有考虑过实际开发中遇到的问题,以及如何全局使用axios,这次再写一篇,以后再有新发现再更新... 1.在static文件夹下新建/js/config. ...

  7. axios,vue-echarts, async, vue 图表数据处理; axios 跨域代理; 异步同步请求接口;生命周期函数

    1.vue-echarts 安装和组件引用 插件官网 https://github.com/ecomfe/vue-echarts 安装 npm install eacharts vue-echarts ...

  8. react axios 跨域访问一个或多个域名

    1.react + axios 跨域访问一个域名 配置非常简单,只需要在当前的 package.json 文件里面配置: "proxy":"http://iot-demo ...

  9. vue 使用axios 跨域请求数据的问题

    axios默认是没有jsonp 跨域请求的方法的.一般来说流行的做法是将跨域放在后台来解决,也就是后台开发人员添加跨域头信息. 例如java中的 header,response.setHeader(& ...

  10. vue-cli3.0+node.js+axios跨域请求session不一样的问题

    一.问题重述 使用的是,前后端分离,前端vue+axios请求,后端使用node搭建服务端接口,遇到的问题是,我通过登录接口吧数据存储型在session,我登录上以后,发现再次验证登录(另一个接口)的 ...

随机推荐

  1. 每天十分钟系列:JS数据操作之神奇的map()

    Array.prototype.map() map()方法可以创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果. demo1 上面的例子,在控制台中打印的结果是: 1 2 3 ...

  2. 搭建阿里云 centos mysql tomcat jdk

    [toc] 阿里云使用centos 登录 http://www.aliyun.com/ 点击登录 进入控制 https://home.console.aliyun.com/ 云服务器 运行中 把ip输 ...

  3. 关于tarjan算法的空间优化

    最近随着对tarjan算法理解的加深,我发现用另外一种途径实现tarjan的方法,且可以省去DFN数组,大大节省了空间.经过大量测试,已经无误.以下将分阶段阐述进行优化的过程. 第一阶段 下面来说一下 ...

  4. LINUX 笔记-date命令

    显示当前时间: 命令: focus@ubuntu:~$ date Thu Aug 31 03:01:17 PDT 2017 focus@ubuntu:~$ date '+%x' 08/31/2017 ...

  5. Servlet 笔记-servlet实例

    Servlet 是服务 HTTP 请求并实现 javax.servlet.Servlet 接口的 Java 类.Web 应用程序开发人员通常编写 Servlet 来扩展 javax.servlet.h ...

  6. RabbitMQ 笔记-工作队列

    工作队列的主要思想是不用等待资源密集型的任务处理完成, 为了确保消息或者任务不会丢失,rabbitmq 支持消息确信 ACK.ACK机制是消费者端从rabbitmq收到消息并处理完成后,反馈给rabb ...

  7. java中的static关键字详解

    static对于我们这些初学者在编写代码和阅读代码是一个难以理解的关键字,也是大量公司面试题最喜欢考的之一.下面我就来就先讲述一下static关键字的用法和我们初学者容易误解的地方. static关键 ...

  8. LeetCode 605. Can Place Flowers (可以种花)

    Suppose you have a long flowerbed in which some of the plots are planted and some are not. However, ...

  9. 顺序线性表 ---- ArrayList 源码解析及实现原理分析

    原创播客,如需转载请注明出处.原文地址:http://www.cnblogs.com/crawl/p/7738888.html ------------------------------------ ...

  10. echarts教程-asp.net+ashx实现堆积柱状

    说说看.崔西莲夫人紧接着说. 想不到史春吉是这种人. 你会这样说倒是有趣,因为这正是我当时的感觉.这跟奈维尔的个性不合.奈维尔,就像大部分男人一样,通常都是尽量避开任何可能造成尴尬或不愉快的场面.我怀 ...