实战web开发的跨域访问

cpfok

浏览: 22309 次
性别:
来自: 北京

最近访客更多访客>>

yutianji

rsldy

shijianxuan

u013305830

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

前端跨域 javascript

以下方法在chrome,Firefox测试通过,其他浏览器没有测试.

先说一下测试环境

修改本地hosts配置如下(修改方法请自行百度)

IP	Domain
127.0.0.1	qr.com
127.0.0.1	t1.qr.com
127.0.0.1	t2.qr.com

直接上代码

服务端代码(测试服务器采用nodejs)

服务器环境采用Express框架,下面插入关键代码(也就是头信息设置)

var express = require('express');
var api = module.exports = express();
var URL = require('url');
//设置跨域访问
api.all('/cookie', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "http://t1.qr.com");
  res.header("Access-Control-Allow-Credentials", "true");
  res.header("Access-Control-Allow-Headers", "*");
  res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
  res.json({
    hostname: req.hostname,
    cookie: req.headers.cookie
  });
});
module.exports = api;

Web页面部分(index.html)

<!DOCTYPE html>
<html>
<head>
    <title>跨域测试</title>
    <script src="//cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
    <script>
        $.ajaxSetup({
            'xhr': function () {
                try {
                    var x = new window.XMLHttpRequest();
                    x.withCredentials = true;
                    return x;
                } catch (e) {
                }
            }
        });
        $(function () {
            // 初始化cookie
            document.cookie = 'text=this is my cookie;domain=.qr.com';
            $('#go').click(function () {
                $.get('http://t2.qr.com/cookie').success(function (data) {
                    console.log(data)
                    $('#content').text(JSON.stringify(data));
                });
            });
        })
    </script>
</head>

<body>
<button id="go"><h1>我要跨域访问</h1></button>
<h3 id="content"></h3>
</body>

</html>

测试流程