Inventory of front-end cross-domain solutions (including front-end and back-end)

    1.同源政策

    1. 如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，其中只要有一个不相同，就是不同源。
      http://www.example.com：8080/dir/page.html与 http://www.example.com/page.html不跨域
      http:协议
      www:子域名
      example:主域名
      8080：端口号（http默认8080）

    2. 同源策略的限制： Cookie、LocalStorage 和 IndexDB 无法读取
      AJAX 请求不能发送

    3. 跨域是浏览器为了安全而实施的同源政策导致的

    2.跨域解决方案

    跨域报错:

    2.1 CORS

    有几个关键的响应头字段：

    a、Access-Control-Allow-Origin：必填，表示可以允许请求的来源。可以填写具体的源名称，也可以填写*表示允许任何源请求。

    b、Access-Control-Allow-Methods：表示允许的请求方法列表。

    c、Access-Control-Allow-Credentials：一个布尔值，表示是否允许发送cookie。默认情况下，cookie 不包含在 CORS 请求中。如果设置为 true，则表示服务器具有显式权限。Cookies 可以包含在请求中并一起发送到服务器。

    d、Access-Control-Allow-Headers：其指明了实际请求中允许携带的首部字段。CORS请求时，XMLHttpRequest对象的getresponseheader()方法只能获取六个基本字段：缓存控制、内容语言、内容类型、过期时间、最后修改时间和pragma。如果要获取其他字段，则必须在访问控制公开标头中指定它们。

    e、Access-Control-Max-Age：预检请求的有效期。在此期间，无需再次发送预检请求。

    普通跨域请求：只需服务端设置Access-Control-Allow-Origin即可

    Access-Control-Allow-Origin: *表示该资源可以被任意外域访问，若设置具体的值则只可与设置的值跨域

    备注： 当响应的是附带身份凭证的请求时（ cookie ），服务端 必须 明确 Access-Control-Allow-Origin 的值，而不能使用通配符“*”。

    携带cookie跨域请求：前后端都需设置

    如果设置 Access-Control-Allow-Origin: * ，不管withCredentials有没有设置，cookie也不会携带

    前端设置：
    若使用原生ajax

    //使用ajax时加上withCredentials属性为true以携带cookie
xhr.withCredentials = true;

    若用jQuery ajax

    $.ajax({
   url:'',
   xhrFields: {
       withCredentials: true    // 前端设置是否带cookie
   },
   crossDomain: true,   // 会让请求头中包含跨域的额外信息，但不会含cookie
});

    服务器端设置：

    // 允许跨域访问的域名：若有端口需写全，注意不能用*
"Access-Control-Allow-Origin"："http://www.domain1.com" 

// 允许前端带认证cookie
"Access-Control-Allow-Credentials"： "true"


    2.2 JSONP

    原理

    JSONP主要就是利用了script标签没有跨域限制的这个特性来完成的，它可以通过src填写目标地址，发送一个带回调参数的get请求。服务器将接口返回数据分割成回调函数返回给浏览器。浏览器解析并执行就可得到服务器返回的数据。

    缺点

    只支持get请求，不支持post请求。适用于加载不同域名的js、css、img等静态资源

    数据格式

    键值对，要加双引号，除了值为数字时不用加双引号

    [
  {
    "id":1,
    "name":"Rick",
    "email":"rick@gmail.com"
  },
  {
    "id":2,
    "name":"Glenn",
    "email":"glenn@gmail.com"
  }
]

    jsonp跨域实现

    若用原生Ajax（点击按钮向服务器发送请求）： script.src的callback后为回调函数的名字

      var btn = document.getElementById('btn');
  function jsonpCores(url) {
    var script = document.createElement('script');
    script.src = 'url?callback=callbackName';
    // 将script标签追加到页面中
    document.body.appendChild(script);
    window.callbackName= function(res){
        console.log(res);
    }
    // 将head中的script标签删除掉,防止多个script标签导致代码冗余
     document.body.removeChild(script);
     console.log('123');
    };

  btn.onclick =jsonpCores('');

    若用jQuery ajax

    $.ajax({
                url: '',
                method:'get',
                // 回调函数的名称
                jsonpCallback: 'fn',
                dataType: 'jsonp', //设置请求方式为jsonp
            })

    若用vue.js

    this.$http.jsonp('url', {
    params: {},
    jsonp: 'fn' //回调函数名
}).then((res) => {
    console.log(res); 
})


    2.3 postMessage跨域

    语法：otherWindow.postMessage(message, targetOrigin, [transfer]);
    otherWindow: 其他窗口的一个引用，比如 iframe 的 contentWindow 属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames
    message：将要发送到其他 window的数据

    targetOrigin：指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示无限制）或者一个URI（最好填一个确切的url）。
    transfer （可选):是一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权


    接收其他域传来的数据：
    window.addEventListener("message", function(e){ console.log(e.data) },false);

    message 的属性有:
    data：从其他 window 中传递过来的数据对象。
    origin：调用 postMessage 时消息发送方窗口的 origin . 例如 “https://example.org (隐含端口 443)”。请注意，这个origin不能保证是该窗口的当前或未来origin，因为postMessage被调用后可能被导航到不同的位置。
    source：对发送消息的窗口对象的引用; 您可以使用此来在具有不同origin的两个窗口之间建立双向通信。

    2.4 WebSocket

    WebSocket 对象提供了用于创建和管理 WebSocket 连接，以及可以通过该连接发送和接收数据的 API。 使用 WebSocket() 构造函数来构造一个 WebSocket

    var aWebSocket = new WebSocket(url [, protocols]);
    url：要连接的URL；WebSocket服务器将响应的URL。
    protocols 可选：一个协议字符串或者一个包含协议字符串的数组。这些字符串用于指定子协议，这样单个服务器可以实现多个WebSocket子协议（例如，您可能希望一台服务器能够根据指定的协议（protocol）处理不同类型的交互）。如果不指定协议字符串，则假定为空字符串。


    属性：

    WebSocket.onclose 用于指定连接关闭后的回调函数。
    WebSocket.onerror 用于指定连接失败后的回调函数。
    WebSocket.onmessage 用于指定当从服务器接受到信息时的回调函数。
    WebSocket.onopen 用于指定连接成功后的回调函数。
    WebSocket.url (只读) WebSocket 的绝对路径。

    事件：

    使用 addEventListener() 或将一个事件监听器赋值给本接口的 oneventname 属性，来监听下面的事件。
    close：当一个 WebSocket 连接被关闭时触发。
    error：当一个 WebSocket 连接因错误而关闭时触发，例如无法发送数据时。
    message：当通过 WebSocket 收到数据时触发。
    open：当一个 WebSocket 连接成功时触发。

    使用

    前端

    const socket = new WebSocket('ws://localhost:8080');
socket.addEventListener('open', function (event) {
    socket.send('成功连接服务器!'); //向服务器发送数据
});
// Listen for messages
socket.addEventListener('message', function (event) {
    console.log('获取服务器数据 ', event.data);
});
//当不需要再用 WebSocket 连接时调用 WebSocket close()方法
socket.close();

    后台

    const WebSocket = require("ws");
const server = new WebSocket.Server({ port: 8080 });
server.on("connection", function(socket) {  //建立连接
  socket.on("message", function(data) {  //获取客户端发来的数据
    socket.send(data);
  });
});


    2.5 代理跨域：开启一个代理服务器实现数据转发

    正向代理帮助客户端访问客户端无法访问服务器本身并将结果返回给客户端。
    反向代理从客户端获取请求并将请求转发给其他服务器。
    正向代理服务器帮助客户端做事，反向代理服务器帮助其他服务器做事
    Nginx反向代理跨域： 配置nginx

    server {
        listen 80;
        server_name client.test;
        location /api {
            proxy_pass http://localhost:8080;
        }
}

    Nodejs中间件代理跨域： 用vue框架webpack.config.js配置

    module.exports = {
    devServer: {
        historyApiFallback: true,
        proxy: [{
            target: '',  // 代理跨域目标接口
            changeOrigin: true,
            secure: false,  // 当代理某些https服务报错时用
        }]
    }
}


    2.6 iframe系列

    document.domain +iframe跨域:两个页面都通过js强制设置document domain为基础主域，实现同域
    locatin.hash + iframe跨域: a 与b跨域相互通信，通过中间页c来实现，三个页面，不同域之间利用iframe的location.hash传值，相同域之间直接js访问来通信。
    window. name + iframe跨域    :通过iframe的src属性由外域转向本地域,跨域数据即由iframe的window.name从外域传递到本地域。
    详见：https://segmentfault.com/a/1190000022398875


    3. 参考资料

    MDN CORS

    MDN window.postMessage

    MDN WebSocket

    Front end cross domain problems and Solutions

    Popular posts from this blog

    大学资料分享——广工计院各个科目实验报告、课设及期末复习资料！！

    各位师弟师妹，我今年即将从广工毕业，因工作毕设都已差不多完成，整理资料时最终还是决定分享自己大学期间积累的各科资料。本人是广工计院一名本科生，在校绩点四年综合4.0左右，我相信这些资料对你们的学习和实验有非常大的实用性和价值。也真心希望大家能做好时间效率管理，一些不必要的课程不用浪费很多时间，把时间多留给自己所走的方向，希望各位师弟师妹好好利用我的资料，提升自己。如果本篇文章对你有帮助，请多来网站阅览并点击下页面的谷歌广告支持一下，十分感谢~~ 本博客除资源分享外还会 定期发布前端相关的行业动态、前端面试题系列等，后续也会逐步将自己的秋招总结发到谷歌博客上，同方向的师弟师妹们可以关注下，毕竟我也是在最寒冬秋招中获得好几个知名厂offer的，相信对你们将来的工作和面试也会非常实用 。 University special design: Specialised design IPV6 Experiment Report: GDUT IPV6 GDUT matlab digital signal processing experiment report: Matlab Experiment Report The latest operating system experiment and course design report: OS Experiment Report Virtualization and Cloud Computing-Hadoop Deployment Experiment Report: Hadoop Report GDUT C language programming experiment report 1-4: C language programming experiment report Summary of Physics Data of GDUT ： Physics GDUT DEA experiment + big assessment (source code, waveform diagram) + test paper information： EDA Data summary of GDUT Electrician： University Ele
    Read more

    Win10 远程计算机或设备将不接受连接

    Image
    Table Of Contents 错误详情 当晚如平常一样开着clash，但谷歌浏览器显示此网站无法提供安全连接，按网上说的方法改https为http、清除SSL状态缓存、还原浏览器默认设置三个方法后还是没能解决，想起重启能解决99%的问题后果断重启电脑，这也是后面悲剧的开始。 电脑重启后，发现打开浏览器依然无法上网，且火狐浏览器等都出现了一样的问题，通过网络诊断得出原因：远程计算机或设备将不接受连接 百度后发现网上的解决方法千篇一律，都是通过Internet——属性——连接——局域网设置——为LAN使用代理服务器的选项去掉勾选就可恢复（也有说将所有复选框都取消勾选） 我满怀希望的尝试后发现然并卵，虽然提示网络状态已连接Internet但是上不了网。。。后来想了想，可能是因为自己用了翻墙上网然后没有退出就重启的关系（如果没用梯子的兄弟姐妹们可以先尝试我上述的方法，行不通的话再试试我后面的方法） 解决方法 可先尝试重新连接关机时使用的翻墙软件 并正常退出，即可访问网络，如果不行再按以下方法 。 非校园网 重置网络：Internet属性——高级——重置 用了科学上网的同学可能I nternet属性 的常规里主页地址会被篡改，可以手动输入成百度地址 设置完成后点确定，然后重启电脑，此时就能恢复访问了。但出错时如果是用着校园网没有退出科学上网就重启的话，此时用校园网还是上不了网，只能用手机开热点的网络上网，于是进一步摸索 校园网 1.先按非校园网方法重置网络 2.删除电脑科学上网的软件 3.重新认证校园网（可以改个密码重新登录） 呜呜，孩子终于又通网了 总结 科学上网时一定要正常进出网络，不能直接关电脑或者断网，否则IP地址还挂在外面网络回不来，所以记得科学上网时 正常退出后再重启电脑 。
    Read more

    JAVA Traffic Signal Light Course Design (Source Code + Report + Video Demonstration)

    Image
    Table Of Contents topic details Simulate the logic of the traffic light management system at the intersection. 1. Randomly generate vehicles traveling along each route 2. Signal lights ignore yellow lights and only consider red and green lights. 3. It should be considered that vehicles turning left are controlled by signal lights, and vehicles turning right are not controlled by signal lights. 4. The specific signal light control logic is the same as that of ordinary traffic light control logic in real life, regardless of the control logic in special cases: North-south vehicles and east-west vehicles are released alternately. Vehicles waiting in the same direction should pass through vehicles first, and then vehicles turning left. 5. The time for each vehicle to pass through the intersection is 1 second (reminder: it can be simulated by thread sleep). 6. The time interval for randomly generating vehicles and the time interval for exchanging traffic lights i
    Read more

    Implementation of Ajax Interceptor

    Image
    Table Of Contents 1. 拦截器 拦截器的设置可以让我们在发出 request 或接到 response 之前做一些事情，例如改变 response的数据格式，或是根据不同 request 来添加不同的config 等。请求拦截器的即在请求发送前进行的操作，如设置是否需要token;响应拦截器的即接收到响应后进行操作，如通过状态码设置响应失败的跳转等 若对Ajax的基本使用还不熟悉推荐先看看博客： AJAX详解 2.原生AJAX实现拦截器 需要改变send方法， XMLHttpRequest.prototype.send 在其原型中重新定义了send函数。 const intercept = (method, url, requestCallback, responseCallback) => { let xhr = new XMLHttpRequest(); //修改原型的open和send方法来创建请求和响应拦截器 let open = XMLHttpRequest.prototype.open; let send = XMLHttpRequest.prototype.send; XMLHttpRequest.prototype.open = function () { requestCallback(); open.call(this, method, url); }; XMLHttpRequest.prototype.send = function () { //当Ajax的状态码改变时调用 this.addEventListener('readystatechange', function () { //请求成功时调用，也可设置别的状态码时调用的函数 if (this.readyState === 4 && this.status === 200) { //响应拦截器,返回有用的data let response = JSON.parse(this
    Read more