jquery、javascript实现(get、post两种方式)跨域解决方法

一、实现get方式跨域请求数据

浏览器端

复制代码
<script>
$(document).ready(function(){
    $.ajax({
        url: "http://www.xxx.cn/index.php",
        type: "get",
        dataType: "jsonp", //指定服务器返回的数据类型
        success: function (data) {
            console.log(data);
        }
    });
});
</script>
复制代码

服务器端

1
2
3
4
5
6
7
8
<?php
    $data = [
        'info'   => '跨域请求成功',
        'status' => 1
    ];
    $callback = $_GET['callback'];//callback参数是发起请求是jquery的回调参数。
    echo $callback.'('.json_encode($data).')';//所有返回数据时,需要按照此方式。
?>

 

二、实现post方式跨域请求

浏览器端

1
2
3
4
5
6
7
8
9
10
11
12
<script>
$(document).ready(function(){
    $.ajax({
        url: "http://www.xxx.cn/index.php",
        type: "post",
        dataType: "json", //指定服务器返回的数据类型
        success: function (data) {
            console.log(data);
        }
    });
});
</script>

 

服务器端

Access-Control-Allow-Origin:* 表示允许任何域名跨域访问

如果需要指定某域名才允许跨域访问,只需把Access-Control-Allow-Origin:*改为Access-Control-Allow-Origin:允许的域名

例如:header('Access-Control-Allow-Origin:http://www.xxx.com');

1
2
3
4
5
6
7
8
9
10
<?php
    header('Access-Control-Allow-Origin: *');//允许所有来源访问
    header('Access-Control-Allow-Methods: POST');//响应类型
     
    $data = [
        'info'   => 'post方式,跨域请求成功',
        'status' => 1
    ];
    echo json_encode($data);
?>

 

某些header请求头

// 指定允许其他域名访问
header('Access-Control-Allow-Origin:*');
// 响应类型
header('Access-Control-Allow-Methods:POST');
// 响应头设置
header('Access-Control-Allow-Headers:x-requested-with,content-type');

//设置内容类型为json

header('content-type:application:json;charset=utf8');  

posted @   Yxh_blogs  阅读(10090)  评论(0编辑  收藏  举报
编辑推荐:
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示