JAVA高级面试进阶训练营视频教程

admin · 发表于 2021-7-21 18:00:11

跨域问题

浏览器的同源策略导致了跨域问题

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

同源

如果两个页面的协议，端口（如果有指定）和域名都相同，则两个页面具有相同的源

下表给出了相对http://store.company.com/dir/page.html同源检测的示例:

URL	结果	原因
http://store.company.com/dir2/other.html	成功
http://store.company.com/dir/inner/another.html	成功
https://store.company.com/secure.html	失败	不同协议 ( https 和 http )
http://store.company.com:81/dir/etc.html	失败	不同端口 ( 81 和 80)
http://news.company.com/dir/other.html	失败	不同域名 ( news 和 store )

跨域问题需要服务端与客户端相同配合完成，单方面并不能解决问题。

同源策略限制下接口请求的正确打开方式

JSONP

使用 nodejs 搭建服务端,监听 8080 端口

//通过require将http库包含到程序中
const http = require("http");
//引入url模块解析url字符串
const url = require("url");
//引入querystring模块处理query字符串
const querystring = require("querystring");

//创建新的HTTP服务器
const server = http.createServer();
//通过request事件来响应request请求
server
  .on("request", function(req, res) {
    let urlPath = url.parse(req.url).pathname;
    // res.writeHead(200, { "Content-Type": "text/html;charset=utf-8" });
    res.writeHead(200, { "Content-Type": "application/json" });
    let data = {
      name: "Hello World"
    };
    if (urlPath === "/jsonp") {
      if (req.url.split("?").length >= 2) {
        let qs = querystring.parse(req.url.split("?")[1]);
        //回调函数名为qs.callback
        let callback = qs.callback + "(" + JSON.stringify(data) + ");";
        res.end(callback);
      } else {
        data.name = "noCallbackFunction";
      }
    }
    res.end(JSON.stringify(data));
  })
  //监听8080端口
  .listen("8080", () => {
    //服务器启动成功
    console.log("Server running! listen 8080");
  });

这样，我们需要的服务器搭建好了，在前端请求后加入’/jsonp?callback=functionName’，就将其认定为 JSONP 请求，且 callback 后带入一个 js 中已有的全局方法。

客户端使用 JS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        function testJSONP(data){
            console.log(data);
        }
    </script>
    <script src="http://127.0.0.1:8080/jsonp?callback=testJSONP"></script>
</body>
</html>

在浏览器控制台输出返回结果
控制台输出结果

使用 jquery 直接跨源访问,会产生错误

<script>
  $(function()
  {$.get("http://127.0.0.1:8080/jsonp", function(data) {
    console.log(data);
  })}
  );
</script>

产生的错误如下：在这里插入图片描述

客户端使用 angularJS,代码如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="myCtrl">
      {{name}}
    </div>
    <script> var app = angular.module("myApp", []); var gitApi = "https://api.github.com?callback=JSON_CALLBACK"; //callback=JSON_CALLBACK固定写法不能修改 app.controller("myCtrl", function($scope, $http) { $http({ method: "JSONP", url: gitApi }).then( function(response) { //调用成功后执行 console.log("success" + JSON.stringify(response.data)); $scope.name = response.data; }, function(response) { //调用失败后执行 console.log(response); } ); }); </script>
  </body>
</html>

CORS

CORS 是一个 W3C 标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出 XMLHttpRequest 请求，从而克服了 AJAX 只能同源使用的限制。

CORS 需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE 浏览器不能低于 IE10。
整个 CORS 通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS 通信与同源的 AJAX 通信没有差别，代码完全一样。浏览器一旦发现 AJAX 请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
因此，实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口，就可以跨源通信。

使用 CORS 设置服务端允许跨域

Access-Control-Allow-Origin
该字段是必须的。它的值要么是请求时 Origin 字段的值，要么是一个*，表示接受任意域名的请求。

res.writeHead(200, { "Content-Type": "application/json" ,"Access-Control-Allow-Origin":"*"});
//指定允许跨源访问的资源
//res.writeHead(200, { "Content-Type": "application/json" ,"Access-Control-Allow-Origin":"http://172.0.0.1"});

Access-Control-Allow-Credentials
该字段可选。它的值是一个布尔值，表示是否允许发送 Cookie。默认情况下，Cookie 不包括在 CORS 请求之中。设为 true，即表示服务器明确许可，Cookie 可以包含在请求中，一起发给服务器。这个值也只能设为 true，如果服务器不要浏览器发送 Cookie，删除该字段即可。
Access-Control-Expose-Headers
该字段可选。CORS 请求时，XMLHttpRequest 对象的 getResponseHeader()方法只能拿到 6 个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在 Access-Control-Expose-Headers 里面指定。上面的例子指定，getResponseHeader('FooBar')可以返回 FooBar 字段的值。

		自动登录	找回密码
密码			立即注册

JAVA高级面试进阶训练营视频教程	Java架构师系统进阶VIP课程	分布式高可用全栈开发微服务教程	Go语言视频零基础入门到精通	Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程	SpringBoot2.X入门到高级使用教程	大数据培训第六期全套视频教程	深度学习（CNN RNN GAN）算法原理	Java亿级流量电商系统视频教程
互联网架构师视频教程	年薪50万Spark2.0从入门到精通	年薪50万！人工智能学习路线教程	年薪50万大数据入门到精通学习路线	年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程	深度学习数据分析基础到实战	最新黑马javaEE2.1就业课程	从 0到JVM实战高手教程	MySQL入门到精通教程