ajax前端与后端配合解决跨域问题

什么是ajax？

它是一种用于创建快速动态网页的技术，通过后台与服务器进行少量数据交换（请求后端数据），ajax可以使网页实现异步更新，即在不更新整个网页的情况下 进行部分网页更新 减少用户的等待时间，加快响应。

XMLHttpRequest 对象

XMLHttpRequest 对象所有的是ajax的基础，XMLHttpRequest 用于在后台与服务器的数据交互 目前所有的浏览器都支持XMLHttpRequest

建立对服务器的调用
open("method","URL",[asyncFlag],["userName"],["password"])
//method 参数可以为"get" "pust" "put"
// method 参数为get时：url参数为'getStar.php?starName='+name
//method 参数为 post时：向服务器发送请求时content为url内容 如:http.send('name=fox&age=18');
//URL 参数为相对或绝对URL
//asyncFlag 为是否选择异步 默认为异步
//userName 用户名
//password 密码

向服务器发送请求

send(content)

原生ajax写法：分为五步

1.创建XMLHttpRequest对象

  var http=new XMLHttpRequest();

2.使用open方法设置和服务器的交互信息

  http.open("get","./data/data.txt")
  //默认异步请求 true

3.设置发送数据，开始和服务器交互

  http.send();

4.注册事件
5.更新界面

http.onreadystatechange=function (res){
                    /!*readyState 状态为4  读取完成
                     status   200  请求成功*!/
                    if(this.status==200&&this.readyState==4)
                    {
                        /!*5.更新界面*!/
                        console.log(this);
                        /!*读取成功之后的返回数据在response  responseText*!/
                        document.write(this.response);
                    }
                }

ajax 跨域

jsonp跨域 前端后端都需要配置 CORS跨域只需要在前端进行配置

jsonp跨域
通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。所以jsonp是需要服务器端的页面进行相应的配合的。
<script>
        function getdata(data){
            console.log(data);
        }
    </script>
    <script src="http://localhost:8080/stu/selectUesr.php?callback=getdata"></script>
    //callback为回调函数

2.CORS请求原理

CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。它的实现原理就是使用自定义的HTTP头部让浏览器和服务器进行有效的沟通，从而决定请求或者响应是否成功即就是在我们发起跨域请求时，浏览器会自动创建一个origin字段，其值就是我们要请求的域名

第一种现象:No ‘Access-Control-Allow-Origin’ header is present on the requested resource,并且The response had HTTP status code 404

出现这种情况的原因如下：

本次ajax请求是“非简单请求”,所以请求前会发送一次预检请求(OPTIONS)
服务器端后台接口没有允许OPTIONS请求,导致无法找到对应接口地址

解决方案: 后端允许options请求

第二种现象:No ‘Access-Control-Allow-Origin’ header is present on the requested resource,并且The response had HTTP status code 405
这种现象和第一种有区别,这种情况下，后台方法允许OPTIONS请求,但是一些配置文件中(如安全配置),阻止了OPTIONS请求,才会导致这个现象

解决方案: 后端关闭对应的安全配置

第三种现象:No ‘Access-Control-Allow-Origin’ header is present on the requested resource,并且status 200
比如origin头部检查不匹配,比如少了一些头部的支持(如常见的X-Requested-With头部),然后服务端就会将response返回给前端,前端检测到这个后就触发XHR.onerror,导致前端控制台报错
解决方案: 后端增加对应的头部支持(Access-Control-Allow-Origin:*;)

*表示支持所有
第四种现象:heade contains multiple values ‘,’
表现现象是，后台响应的http头部信息有两个Access-Control-Allow-Origin:*
解决方案:
建议删除代码中手动添加的*，只用项目配置中的即可
建议删除IIS下的配置*，只用项目配置中的即可

后端应该如何配置以解决问题
PHP后台配置
PHP后台得配置几乎是所有后台中最为简单的,遵循如下步骤即可:
第一步:配置Php 后台允许跨域

<?php
header('Access-Control-Allow-Origin: *');

主要为跨域CORS配置的两大基本信息,Origin和headers

第二步:配置Apache web服务器跨域(httpd.conf中)

//原始代码：
<Directory />
    AllowOverride none
    Require all denied
</Directory>
//修改代码：
<Directory />
    Options FollowSymLinks
    AllowOverride none
    Order deny,allow
    Allow from all
</Directory>

JAVA后台配置

方法一：

JAVA后台配置只需要遵循如下步骤即可:

第一步:获取依赖jar包下载 cors-filter-1.7.jar, java-property-utils-1.9.jar 这两个库文件放到lib目录下。(放到对应项目的webcontent/WEB-INF/lib/下)
第二步:如果项目用了Maven构建的,请添加如下依赖到pom.xml中:

<dependency>
    <groupId>com.thetransactioncompany</groupId>
    <artifactId>cors-filter</artifactId>
    <version>[ version ]</version>
</dependency>

方法二：

在代码里加入：
Response.AddHeader("Access-Control-Allow-Origin", "*");

NET后台配置

.NET后台配置可以参考如下步骤:

第一步:网站配置
打开控制面板，选择管理工具,选择iis;右键单击自己的网站，选择浏览;打开网站所在目录,用记事本打开web.config文件添加下述配置信息,重启网站

("Access-Control-Allow-Headers":"X-Requested-With,Content-Type,Accept,Origin")