关于js跨域的问题

出现跨域问题,经常会提到的一种方案就是设置Access-Control-Allow-Origin,问题是,在后台设置header("Access-Control-Allow-Origin:*"),但是没有起到效果:

clipboard.png

clipboard.png

clipboard.png

请问这个header应该如何正确的设置?谢谢

回复
阅读 2.2k
5 个回答
header("Access-Control-Allow-Origin:*");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
header('Access-Control-Allow-Methods: GET, POST, PUT');

js发送的时候选择jsonp方式

首先要明白,“防跨域”是浏览器的安全机制,所以“请求发不过来”这个描述就是错的,应该是“请求发不出去”。检查和排错都应该在浏览器上进行。

如果是 Chrome 的话,打开开发者工具,发起请求,看下报什么错,再想办法解决,应该是可以的。

用fiddler 做一个反向代理?
比如我本地项目运行的url是localhost:10080/home.html
发送api的地址是 150.xxx.xxx.xxx/local-dev/item/list

就可以在fiddler的 CustomeRules.js 里面加上

if (oSession.PathAndQuery.Contains("/local-dev/")) {
    oSession.host = "localhost:10080";
}

然后 当你本地运行项目时 改用150.xxx.xxx.xxx/local-dev/home.html 访问

Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。
为什么我们从不同的域(网站)访问数据需要一个特殊的技术(JSONP )呢?这是因为同源策略。
同源策略,它是由Netscape提出的一个著名的安全策略,现在所有支持JavaScript 的浏览器都会使用这个策略。

在前端使用jsonp解决跨域问题,

jquery:
var url = "xxx.php?"+ Math.random() + '&jsoncallback=?';
$.getJSON(url,
    {//此处为传递的参数
        action:x,
        isshow:1
    },
    function(result){//回调函数
        $("div").html(result.html);
    }
);
//后端以这种格式返回数据
echo htmlspecialchars($_GET['jsoncallback'], ENT_QUOTES) . "({html:'" . $html . "'})";
 header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');
        header('Access-Control-Allow-Methods: GET, POST');
        header('Access-Control-Allow-Origin: *');
        header('Access-Control-Allow-Credentials: true');
        if(app('request')->getMethod() == 'OPTIONS'){
            exit('');
        }

几个需要注意的.
第一:设置允许请求的头,如果你在ajax里面请求设置了自定义的头,比如token等,需要添加到后面
第二:就是允许的域名和请求的类型了
第三:你光设置个头是没用了,浏览器会先发送个OPTIONS请求,如果你返回了200 才会继续发送正式的一个请求,
所以你要判断如果请求的方式是OPTIONS 直接结束程序,返回200 就行了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏