ajax本地读取跨域如何解决,ajax 本地跨域请求以及解决方法

ajax 本地跨域请求以及解决方法

什么是跨域?

?? 我们通常所说的跨域是狭义的, 是由浏览器同源策略限制的一类请求场景所谓同源是指 "协议 + 域名 + 端口" 三者相同, 即便两个不同的域名指向同一个 ip 地址, 也非同源, 只要没有同时满足这三个条件的请求即为跨域请求, 跨域请求控制台一般会出现类似错误:XMLHttpRequestcannot load http://xxxxx.php.

NoAccess-Control-Allow-Originheaderispresent on the requested resource.

Originhttp://xxx is therefore not allowed access.

设置本地跨域

?? 首先我们在本地设置本地跨域请求, 首先需要安装 wamp 服务器, 其默认的 localhost 端口为 80, 我们找到 wamp 的安装路径, 如我的是安装在 D 盘, 则在 D:\wamp\bin\apache \apache2.4.9\conf \ 中打开 httpd.conf 文件, 在 Listen [::0]:80 语句下添加 Listen [::0]:8011, 点击保存, 重启 wamp 或 Apach, 这样我们就配置了一个 localhost:8011 端口接下来在 wamp\www 文件夹中新建 test1 和 test2 文件夹, 在 test1 下新建 index 文件, 在 test2 文件夹下新建 index2.php 文件

方法一:

1)test1/index.html 文件 js 代码如下:

$(function(){

$.ajax({

url:"http://localhost:8011/test2/index2.php",

type:get,

dataType:jsonp,// 请求方式为 jsonp

jsonpCallback:"onBack",// 自定义回调函数名

success:function(data){

console.info(data)

}

});

});

2)test2/index2.php 文件代码如下:<?php

$callback=$_GET[callback];

$data=array(a=>1,b=>2,c=>3);

echo $callback.(.json_encode($data).);

?>

这样就可以进行 ajax 访问了

方法二:

1)test1/index.html 文件 js 代码如下:

functiondosomething(jsondata){

console.log(jsondata)

}

2)test2/index2.php 文件代码同方法一的 test2/index2.php

这样第二种方法也 ok

方法三:

1)test1/index.html 文件 js 代码如下:$.ajax({

url:http://localhost:8011/test2/index2.php?callback=myFunction,

type:get,

data:{},

success:function(json){

console.log(json)

},

error:function(){

alert(fail);

}

});

2)test2/index2.php 文件代码:<?php

header(Access-Control-Allow-Origin:*);

$callback=$_GET[callback];

$data=array(a=>1,b=>2,c=>3);

echo $callback.(.json_encode($data).);

?>

这样第三种方法也行啦

请求方式:

1)在 html 的 ajax 请求中 dataType: jsonp, 这句是关键, 没有这句就没法进行 ajax 请求这也就是 jsonp 的跨域请求方式缺点就是只能通过 GET 的请求方法, 不能用 POST

2)第二种方法是利用 script 的 src 不受同源限制, 进行的方法回调进行跨域请求

3)第三种方法是跨域资源共享 (CORS), 通过在请求文件添加 header(Access-Control-Allow-Origin:*);[// 指定允许其他域名访问] 实现跨域的, 可以多种请求方法

4)还有其他的方法, 这边就不一 一讲述啦, 如有需要大家可以参考其他优秀文章

结语:

新人学习 ajax 跨域的小测试, 如有不足之处, 欢迎指正哈!

github 下载地址: https://github.com/sharebetter/ajax

来源: http://www.bubuko.com/infodetail-2523798.html