记一次跨域问题解决

跨域问题产生是因为浏览器的同源策略。解决办法参照： http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html

一般解决办法：使用jsonp(比较老)，使用CORS跨域资源共享(Cross-origin resource sharing)(推荐)
1.jsonp方法
页面ajax请求（只能发送get请求，即使ajax是post方法）：

<script>
        $(function() {
            $.ajax({
                url:'xxxxx',
                dataType : "JSONP",
                type : "POST",
                data : {
                    'value':2,
                    'type' :'测试',
                    'desc' : 'desc',
                    'openid' : '12412'
                },
                success : function(response) {
                    console.log(response.msg);
                },
                error : function(e) {
                    console.log(e);
                }
            });
        })
    </script>

后端php代码(基于laravel):

return response()->jsonp($callback, ['code' => 404, 'msg' => '未找到对应用户'], 404);

2.修改后端返回头

<script>
        $(function() {
            $.ajax({
                url:'xxxxx',
                type : "get",
                data : {
                    'value':2,
                    'type' :'测试',
                    'desc' : 'desc',
                    'openid' : '12412'
                },
                success : function(response) {
                    console.log(response.msg);
                },
                error : function(e) {
                    console.log(e);
                }
            });
        })
		
    </script>

后端php代码(基于laravel):

return response()->json(['code' => 404, 'msg' => '未找到对应用户'], 404, [header('Access-Control-Allow-Origin:http://www.xyzabc.com.cn')]);

有关CROS的详细介绍参照阮一峰老师的这篇文章： http://www.ruanyifeng.com/blog/2016/04/cors.html

记一次跨域问题解决

猜你喜欢