实战web开发的跨域访问

最新推荐文章于 2024-02-18 20:49:20 发布

cpfok

最新推荐文章于 2024-02-18 20:49:20 发布

阅读量169

点赞数

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

本文链接：https://blog.csdn.net/cpfok/article/details/84814917

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了一个使用Node.js和Express框架实现跨域访问的具体案例。通过修改本地hosts文件和设置服务端响应头信息，实现了从一个域名向另一个域名发起带有cookie信息的跨域请求。文章包含完整的前端和后端代码示例。

摘要由CSDN通过智能技术生成

以下方法在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>

测试流程