跨域问题解决

最新推荐文章于 2023-05-14 17:04:24 发布

husterxsp

最新推荐文章于 2023-05-14 17:04:24 发布

阅读量635

点赞数

分类专栏： javascript 文章标签：跨域

本文链接：https://blog.csdn.net/xsp_Login/article/details/47344535

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

协议，子域名，端口号等不同，均会导致跨域问题 No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
，有几种解决办法如下：

使用代理：如果想访问不同域名下的api接口文件，可以访问同域名下的php文件，然后，该同域名下的php文件再来访问那个不同域名下的文件，即通过后端代理。
使用jsonp，但jsonp仅支持GET请求，不支持POST请求，如下代码中即使写的是POST，但是通过查看network发送的请求可以发现，实际发送的是GET请求。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
    $.ajax({ 
        type: "POST",   
        url: "http:husterxsp.sinaapp.com/jsonp_jquery.php",
        dataType: "jsonp",
        jsonp: "callback",
        success: function(data){
            console.log(data);
        }  
    });
</script>
</body>
</html>

<?php
$data = '{"a":1,"b":3}';
$jsonp = $_GET['callback'];
echo $jsonp.'('.$data.')';
?>

原生js实现如下:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>XHR</title>
</head>
<body>
<script type="text/javascript">
    function callfunc(data){
        console.log(data);
    }
    var url = "http:husterxsp.sinaapp.com/jsonp_js.php?&jsonp=callfunc";
    var script = document.createElement('script');
    script.setAttribute('src', url);
    document.getElementsByTagName('head')[0].appendChild(script); 
</script>
</body>
</html>

<?php
$jsonp = $_GET['jsonp'];
$data = '{"a":1,"b":3}';
$result = $jsonp.'('.$data.')';
echo $result;

HTML5提供的XMLHttpRequest实现跨域的功能，但IE的低版本会不支持，方法很简单，只需在后端php代码中添加：

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

或者

header('Access-Control-Allow-Methods:POST,GET');

等等。而前端不需要做任何改动。

另外，在调试的时候，可以在chrome属性，目标，添加 –disable-web-securit，即可调试。

参考： http://www.imooc.com/learn/250

husterxsp

关注

0
点赞
踩
0

收藏

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

协议，子域名，端口号等不同，均会导致跨域问题 No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. ，有几种解决办法如下：使用代理：如果想访问不同域名下的api接口文件，可以访问同域名下的php文件，
复制链接

扫一扫