当前位置: 首页 > article >正文

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

什么是跨域?

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

XMLHttpRequest cannot load http://xxxxx.php.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://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代码如下:

<script>
   $(function(){
        $.ajax( {
            url: "http://localhost:8011/test2/index2.php",
            type: 'get',
           dataType: 'jsonp', // 请求方式为jsonp
           jsonpCallback: "onBack", // 自定义回调函数名
           success: function(data){
              console.info(data)
           }
       });
 });
</script>

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代码如下:

<script>
  function dosomething(jsondata){
        console.log(jsondata)
  }
</script>
<script src="http://localhost:8011/test2/index2.php?callback=dosomething"></script>

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)还有其他的方法,这边就不一 一讲述啦


http://www.kler.cn/a/3242.html

相关文章:

  • 如何把obsidian的md文档导出成图片,并加上文档属性
  • Go优雅实现redis分布式锁
  • 关于低代码技术架构的思考
  • 《企业应用架构模式》笔记
  • 【数据结构】_链表经典算法OJ:合并两个有序数组
  • 【第九天】零基础入门刷题Python-算法篇-数据结构与算法的介绍-六种常见的图论算法(持续更新)
  • 59、C语言程序设计谭浩强第七章
  • 你真的掌握到“优先级队列“的精髓了吗?
  • linux入门---操作体统的概念
  • leetcode.1574 删除最短的子数组使剩余数组有序 - 阿里笔试 双指针 二分
  • 清晰概括:进程与线程间的区别的联系
  • 两种方法教你在postman设置请求里带动态token
  • 入职第一天就被迫离职,找工作多月已读不回,面试拿不到offer我该怎么办?
  • MySQL数据库管理系统安装部署——Linux
  • Java 集合【学习笔记】Java 基础
  • 注意力机制(四):多头注意力
  • 冲击蓝桥杯-并查集,前缀和,字符串
  • Mysql查询优化_单表使用索引及常见索引失效
  • Linux编译cpprestsdk库
  • 菜鸟刷题Day6
  • 学习 Python 之 Pygame 开发魂斗罗(十三)
  • 邪恶的想法冒出,立马启动python实现美女通通下
  • vue更高效的工具-vite
  • nodejs的后端框架egg,thinkjs,nestjs,nuxtjs,nextjs对比
  • Spring Security实践
  • python自动发送邮件,qq邮箱、网易邮箱自动发送和回复