解决跨域问题

最新推荐文章于 2024-07-02 15:15:34 发布

ldybk

最新推荐文章于 2024-07-02 15:15:34 发布

阅读量237

点赞数

本文链接：https://blog.csdn.net/weixin_47124571/article/details/105955178

版权

1.解决跨站问题

sonp的实现步骤

视图 h5

在这里插入图片描述

Api

在这里插入图片描述

效果图

在这里插入图片描述

代码

.Api
userController.php 控制器**

//登录接口
public function login(Request $request)
{
    //接收传过来的get请求的数据
    $call=$request->get('callback');
    $arr=[
        'status'=>200,
        'msg'=>'',
        'data'=>[]
    ];
    echo $call.'('.json_encode($arr).')';
    exit;
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>H5 login</title>
    <style>

    </style>
</head>
<body>
    <div class="flex-center position-ref full-height">
        <div class="content">
            <div class="title">
                H5 Login
            </div>
            <table>
                <tr>
                    <td>用户名</td>
                    <td><input type="text"></td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td><input type="text"></td>
                </tr>
                <tr>
                    <td colspan="2"><button onclick="login()">jsonp登录</button></td>
                </tr>
                <tr>
                    <td colspan="2"><button onclick="login2()">登录</button></td>
                </tr>

            </table>
        </div>
    </div>
</body>
</html>
<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>

<script>
    var url='http://api.ldyphp.top/login';
    function login()
    {
        $.ajax({
            url:url,
            data:{
                user_name:"zhangsan"
            },
            type:'post',
            dataType:'jsonp',
            jsonpCallback:'loginCallBack',
            success:function(json_info){
//                alert(json_info.msg);
                console.log(json_info.msg);
                alert(JSON.stringify(json));
            }
        })
    }

//loginCallBack({"status":200,"msg":"","data":[]})
//    function loginCallBack(json){
//        alert(JSON.stringify(json));
//    }
</script>

服务端可以指定特定的域名可以请求
格式

// 允许a.com发起的跨域请求  
//header("Access-Control-Allow-Origin:http://a.com");
//如果需要设置允许所有域名发起的跨域请求，可以使用通配符 *  
header("Access-Control-Allow-Origin:*");
header('Access-Control-Allow-Headers: X-Requested-With,X_Requested_With');

视图
Api

*号代表所有的都不验证csrf

效果图
在这里插入图片描述

代码
Api
userController.php 控制器

public function login2(Request $request)
{
    $arr=[
        'status'=>200,
        'msg'=>'',
        'data'=>[]
    ];
    return $arr;
}

Index.php

/ 允许a.com发起的跨域请求  
//header("Access-Control-Allow-Origin:http://a.com");
//如果需要设置允许所有域名发起的跨域请求，可以使用通配符 *  
header("Access-Control-Allow-Origin:http://h5.ldyphp.top");
header('Access-Control-Allow-Headers: X-Requested-With,X_Requested_With');

VerifyCsrfToken.php

protected $except = [
    //
    '*'
];

H5
Login.blade.php 视图

function login2()
{
    var url='http://api.ldyphp.top/login2';
    $.ajax({
        url:url,
        data:{
            user_name:"zhangsan"
        },
        type:'post',
        success:function(json_info){
            console.log(json_info.msg);
            alert(JSON.stringify(json));
        }
    })
}

补充：

CORS 定义
Cross-Origin Resource Sharing（CORS）跨来源资源共享是一份浏览器技术的规范，提供了 Web 服务从不同域传来沙盒脚本的方法，以避开浏览器的同源策略，是 JSONP 模式的现代版。与 JSONP 不同，CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。用 CORS 可以让网页设计师用一般的 XMLHttpRequest，这种方式的错误处理比 JSONP 要来的好。另一方面，JSONP 可以在不支持 CORS 的老旧浏览器上运作。现代的浏览器都支持 CORS。
php后台响应头部代码

//json头
header("Content-type: application/json");
 
//跨域
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Origin: 跨域URL");
 
//CORS
header("Access-Control-Request-Methods:GET, POST, PUT, DELETE, OPTIONS");
header('Access-Control-Allow-Headers:x-requested-with,content-type,test-token,test-sessid');

js请求代码

$.ajax({
    type: "POST",
    url: "",
    xhrFields: {withCredentials: true},
    crossDomain: true,
    data: "",
    beforeSend: function (XMLHttpRequest) {  
   XMLHttpRequest.setRequestHeader("test-token", 'abcd');            
   XMLHttpRequest.setRequestHeader("test-sessid", 'abcd');                                      		     
    },
    error: function (XMLHttpRequest) {
        if (XMLHttpRequest.status === 401) { }
    },
    success: function () {},
    complete: function () {}
});

ldybk

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
解决跨域问题

1.解决跨站问题sonp的实现步骤视图 h5Api效果图代码.ApiuserController.php 控制器**//登录接口public function login(Request $request){ //接收传过来的get请求的数据 $call=$request->get('callback'); $arr=[ ...
复制链接

扫一扫