浏览器跨域问题

Origin: http://www.testweb.cn
Access-Control-Request-Method: POST
Access-Control-Request-Headers: NCZ

Access-Control-Allow-Origin: http://www.testweb.cn
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: NCZ
Access-Control-Max-Age: 1728000

// 前端代码
// 1. 定义一个 回调函数 handleResponse 用来接收返回的数据
function handleResponse(data) {
    console.log(data);
};

// 2. 动态创建一个 script 标签，并且告诉后端回调函数名叫 handleResponse
var body = document.getElementsByTagName('body')[0];
var script = document.getElement('script');
script.src = 'http://www.testweb.cn/json?callback=handleResponse';
body.appendChild(script);

// 3. 通过 script.src 请求 ‘http://www.testweb.cn/json?callback=handleResponse’，
// 4. 后端能够识别这样的 URL 格式并处理该请求，然后返回 handleResponse({"name": "testweb"}) 给浏览器
// 5. 浏览器在接收到 handleResponse({"name": "testweb"}) 之后立即执行 ，也就是执行 handleResponse 方法，获得后端返回的数据，这样就完成一次跨域请求了。

// 后端代码
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    response.setCharacterEncoding("UTF-8");
    response.setContentType("text/html;charset=UTF-8");

    //数据
    List<Student> studentList = getStudentList();

    JSONArray jsonArray = JSONArray.fromObject(studentList);
    String result = jsonArray.toString();

    //前端传过来的回调函数名称
    String callback = request.getParameter("callback");
    //用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了
    result = callback + "(" + result + ")";

    response.getWriter().write(result);
}

// 前端代码
<script>
    function showData (data) {
        console.info("调用showData");

        var result = JSON.stringify(data);
        $("#text").val(result);
    }
    $(document).ready(function () {
        $("#btn").click(function () {
            $.ajax({
                url: "http://localhost:9090/student",
                type: "GET",  // 此处即使改为 POST, jquery 也会自动会转为GET方式
                dataType: "jsonp",  //指定服务器返回的数据类型
                jsonp: "theFunction",   //指定参数名称，默认是callback
                jsonpCallback: "showData",  //指定回调函数名称
                success: function (data) {
                    console.info("调用success");
                }
            });
        });

    });
</script>

// 执行结果是，先调用callbak毁掉函数，
// 再调用 success

// 后端代码
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    response.setCharacterEncoding("UTF-8");
    response.setContentType("text/html;charset=UTF-8");

    //数据
    List<Student> studentList = getStudentList();

    JSONArray jsonArray = JSONArray.fromObject(studentList);
    String result = jsonArray.toString();

    //前端传过来的回调函数名称
    String callback = request.getParameter("theFunction");
    //用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了
    result = callback + "(" + result + ")";

    response.getWriter().write(result);
}

var img = new Image();

// 通过 onload 及 onerror 事件可以知道响应是什么时候接收到的，但是不能获取响应文本
img.onload = img.onerror = function() {
    console.log("Done!");
}

// 请求数据通过查询字符串形式发送
img.src = 'http://www.testweb.cn/test?name=testweb';

// proxy服务器
server {
    listen       81;
    server_name  www.domain1.com;
    location / {
        proxy_pass   http://www.domain2.com:8080;  #反向代理
        proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
        index  index.html index.htm;

        # 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用
        add_header Access-Control-Allow-Origin http://www.domain1.com;  #当前端只跨域不带cookie时，可为*
        add_header Access-Control-Allow-Credentials true;
    }
}

<iframe src="http://testweb.cn/b.html" id="myIframe" onload="test()">
<script>
    document.domain = 'testweb.cn'; // 设置成主域
    function test() {
        console.log(document.getElementById('myIframe').contentWindow);
    }
</script>

<script>
    document.domain = 'testweb.cn'; // document.domain 设置成与主页面相同
</script>

<iframe src="http://testweb.cn/b.html" id="myIframe" onload="test()" style="display: none;">
<script>
    // 2. iframe载入 "http://testweb.cn/b.html" 页面后会执行该函数
    function test() {
        var iframe = document.getElementById('myIframe');
        
        // 重置 iframe 的 onload 事件程序，
        // 此时经过后面代码重置 src 之后，
        // http://www.testweb.cn/a.html 页面与该 iframe 在同一个源了，可以相互访问了
        iframe.onload = function() {
            var data = iframe.contentWindow.name; // 4. 获取 iframe 里的 window.name
            console.log(data); // hello world!
        };
        
        // 3. 重置一个与 http://www.testweb.cn/a.html 页面同源的页面
        iframe.src = 'http://www.testweb.cn/c.html';
    }
</script>

<script type="text/javascript">
    // 1. 给当前的 window.name 设置一个 http://www.testweb.cn/a.html 页面想要得到的数据值 
    window.name = "hello world!";
</script>

<iframe src="http://testweb.cn/b.html" id="myIframe" onload="test()" style="display: none;">
<script>
    // 2. iframe载入 "http://testweb.cn/b.html" 页面后会执行该函数
    function test() {
        // 3. 获取通过 http://testweb.cn/b.html 页面设置 hash 值
        var data = window.location.hash;
        console.log(data);
    }
</script>

<script type="text/javascript">
    // 1. 设置父页面的 hash 值
    parent.location.hash = "world";
</script>

<iframe src="http://testweb.cn/b.html" id="myIframe" onload="test()" style="display: none;">
<script>
    // 1. iframe载入 "http://testweb.cn/b.html" 页面后会执行该函数
    function test() {
        // 2. 获取 http://testweb.cn/b.html 页面的 window 对象，
        // 然后通过 postMessage 向 http://testweb.cn/b.html 页面发送消息
        var iframe = document.getElementById('myIframe');
        var win = iframe.contentWindow;
        win.postMessage('我是来自 http://www.testweb.cn/a.html 页面的消息', '*');
    }
</script>

<script type="text/javascript">
    // 注册 message 事件用来接收消息
    window.onmessage = function(e) {
        e = e || event; // 获取事件对象
        console.log(e.data); // 通过 data 属性得到发送来的消息
    }
</script>

// socket.html
<script>
	// 高级api  不兼容  但是有一个socket.io这个库，是兼容的(一般用这个)
    let socket = new WebSocket('ws://localhost:3000');
    socket.onopen = function () {
      socket.send('hello');//向服务器发送数据
    }
    socket.onmessage = function (e) {
      console.log(e.data);//接收服务器返回的数据
    }
</script>
// server.js
let express = require('express');
let app = express();
let WebSocket = require('ws');//记得安装ws
let wss = new WebSocket.Server({port:3000});
wss.on('connection',function(ws) {
  ws.on('message', function (data) {
    console.log(data);
    ws.send('this is server')
  });
})