今天和同事探讨了前后端如何真正实现隔离开发的问题,如果前端单独作为服务发布,势必会涉及到无法直接调用后端的接口的问题,因为浏览器是不允许跨域提交请求的。

所谓跨域访问,就是在浏览器窗口,和某个服务端通过某个协议+域名+端口号建立了会话的前提下,去使用与这三个属性任意一个不同的源提交了请求,比如:打开新窗口,iframe,xmlhttprequest,那么浏览器就认为你是跨域了,违反了浏览器的同源策略。

  解决此问题,w3c标准中,有针对跨域请求的规范:

  在响应头中带上Access-Control-Allow-Origin,值是你允许跨域访问的源,比如http://www.baidu.com,注意这里只支持*(表示所有源)号或者某个源,不支持多个源,如果要实现多个源,可以自己包装一个集合,对每次的请求在集合中判断是否存在,如存在,就放到响应头中来;

  使用Access-Control-Allow-Methods 限制允许跨域访问的http方法类型,多个以逗号隔开,比如:POST,GET,OPTIONS

  使用Access-Control-Allow-Headers,限制允许跨域访问的http头,包含这里设置的头,才允许跨域访问 比如:foo-x

  对于客户端在发送请求的时候,浏览器会检测如果本次请求是一个非简单的跨域请求,就会先发送一个OPTIONS的请求到后台预检一下是否支持本源的跨域,如果支持,后台就用上面提到的几个响应头信息告诉浏览器,接着浏览器会发送真正的请求到后台,否则请求将不会得到结果,浏览器会报违反同源策略的警告。

  关于简单跨域请求和非简单跨域请求解释如下:

  CORS(Cross Origin Resourse-Sharing),中文意思是跨域资源共享,定义了两种跨域请求,简单跨域请求和非简单跨域请求。当一个跨域请求发送简单跨域请求包括:请求方法为HEAD,GET,POST;请求头只有4个字段,Accept,Accept-Language,Content-Language,Last-Event-ID;如果设置了Content-Type,则其值只能是application/x-www-form-urlencoded,multipart/form-data,text/plain,所以,我们设置一下content-type为其它的值,比如application/json,此次请求就会被认为是非简单跨域请求,浏览器就会提交预检请求了。

php 允许浏览器跨域访问web服务端的解决方案的更多相关文章

  1. 允许浏览器跨域访问web服务端的解决方案

    今天和同事探讨了前后端如何真正实现隔离开发的问题,如果前端单独作为服务发布,势必会涉及到无法直接调用后端的接口的问题,因为浏览器是不允许跨域提交请求的. 所谓跨域访问,就是在浏览器窗口,和某个服务端通 ...

  2. html5客户端跨域访问php服务端数据

    客户端代码: var param = $.param( { feed:JSON.stringify({ content:'abcd' }) } ); $http({ url: 'http://61.1 ...

  3. SharePoint 2013 APP 开发示例 (六)服务端跨域访问 Web Service (REST API)

    上个示例(SharePoint 2013 APP 开发示例 (五)跨域访问 Web Service (REST API))是基于JavaScript,运行在web browser内去访问REST AP ...

  4. 设置IE浏览器跨域访问数据

    在开发中,经常会遇到多站点跨域访问后台服务获取数据的情况,解决方法有两种 自己写代理服务,访问代理服务,代理服务请求服务获取数据再返回: 设置浏览器可以跨域访问数据. 本文来讲如何设置IE浏览器跨域访 ...

  5. express设置允许跨域访问该服务.

    const express = require('express');const app = express(); //设置允许跨域访问该服务.app.all('*', function (req, ...

  6. 在Firefox中通过AJAX跨域访问Web资源---

    一.解决在firefox中无法跨域访问的问题 AJAX从本质上讲就是命名用XMLHttpRequest组件来向服务端发送HTTP请求,请接收相应信息.至于成功接收到响应信息后的操作,就和普通的Web客 ...

  7. Ajax跨域访问wcf服务中所遇到的问题总结。

    工具说明:vs2012,sql server 2008R2 1.首先,通过vs2012建立一个wcf服务项目,建立好之后.再新开一个vs2012 建立web项目,通过jQuery的ajax方法访问服务 ...

  8. [转] Chrome - 浏览器跨域访问设置(附:新老版本两种设置方法)

    [From] http://www.hangge.com/blog/cache/detail_1703.html 在进行前后分离的 webapp 开发,或者 H5 移动 App 开发时,我们会使用 P ...

  9. ajax跨域访问http服务--jsonp

    在前面一篇文章<Spring Cloud 前后端分离后引起的跨域访问解决方案>里我们提到使用ajax跨域请求其他应用的http服务,使用的是后台增加注解@CrossOrigin或者增加Co ...

随机推荐

  1. Mysql被攻击

    日志: show global variables like '%general%'; set global general_log=on; 默认Path:/var/run/mysqld/mysqld ...

  2. [Shell]获取IP地址

    ifconfig eth0 | grep "inet addr:" | awk '{print $2}' | cut -c 6- ifconfig eth1 | grep &quo ...

  3. freeRTOS中文实用教程3--中断管理之中断嵌套

    1.前言 最新的 FreeRTOS 移植中允许中断嵌套.中断嵌套需要在 FreeRTOSConfig.h 中设置configKERNEL_INTERRUPT_PRIORITY 和configMAX_S ...

  4. mysql系列一、mysql数据库规范

    一. 表设计 库名.表名.字段名必须使用小写字母,“_”分割. 库名.表名.字段名必须不超过12个字符. 库名.表名.字段名见名知意,建议使用名词而不是动词. 表必须使用InnoDB存储引擎. 表必须 ...

  5. 高级 Java 面试通关知识点整理!

    1.常用设计模式 单例模式:懒汉式.饿汉式.双重校验锁.静态加载,内部类加载.枚举类加载.保证一个类仅有一个实例,并提供一个访问它的全局访问点. 代理模式:动态代理和静态代理,什么时候使用动态代理. ...

  6. 执行update语句mysql5.6报错ERROR 1292 (22007): Truncated incorrect DOUBLE value: '糖糖的坤大叔'

    执行修改语句update tbl_user_details set nickname=CONCAT("用户",yunva_id) where nickname = yunva_id ...

  7. hdu4812 逆元+树分治

    逆元链接:https://www.cnblogs.com/zzqc/p/7192436.html 经典的树分治题 #pragma comment("linker,"/STACK:1 ...

  8. python 全栈开发,Day81(博客系统个人主页,文章详情页)

    一.个人主页 随笔分类 需求:查询当前站点每一个分类的名称以及对应的文章数 完成这个需求,就可以展示左侧的分类 它需要利用分组查询,那么必须要会基于双下划线的查询. 基于双下划线的查询,简单来讲,就是 ...

  9. python 全栈开发,Day34(基于UDP协议的socket)

    昨日内容回顾 网络的基础概念arp协议 :通过ip地址找到mac地址五层模型 : 应用层 传输层 网络层 数据链路层 物理层tcp协议 : 可靠的 面向连接 全双工 三次握手 四次挥手udp协议 : ...

  10. 《剑指offer》-青蛙跳台阶II

    一只青蛙一次可以跳上1级台阶,也可以跳上2级--它也可以跳上n级.求该青蛙跳上一个n级的台阶总共有多少种跳法. 其实题目很水...就是一个等比数列通项公式嘛 f(0)=1 f(1)=1 f(n)=f( ...