• AJAX跨域访问（不同域之间相互访问）

    目录

    一、跨域：

    • 跨域是指从一个域名的网页去请求另一个域名的资源。比如从百度(https://baidu.com)页面去请求京东(https://www.jd.com)的资源。
    • 通过超链接或者form表单提交或者超链接的方式进行跨域是不存在问题的。但在一个域名的网页中的一段js代码发送ajax请求去访问另一个域名中的资源，由于同源策略的存在导致无法跨域访问，那么ajax就存在这种跨域问题。
    • 有一些情况下，我们是需要使用ajax进行跨域访问的。比如某公司的A页面(8080:a.bjpowernode.com)有可能需要获取B页面(8081:b.bjpowernode.com)。

    二、同源策略：

    • 同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性，同源就是协议（http）、域名（localhost）和端口（8080）都相同。
    • Ajax无法跨域：http://localhost:8080/这个域名中的文件不能访问http://localhost:8081/这个域名中的内容。但是form表单和超链接可以。
    • 同源策略有什么用？如果你刚刚在网银输入账号密码，查看了自己还有1万块钱，紧接着访问一些非法的网站，这个网站可以访问刚刚的网银站点，并且获取账号密码，那后果可想而知。所以，从安全的角度来讲，同源策略是有利于保护网站信息的。

    三、解决Ajax跨域问题的方案：

    方案一：设置响应头

    在被访问的servlet中加入下述代码表示允许该域名访问我（该servlet）。

        response.setHeader("Access-Control-Allow-Origin", "http://localhost:8080"); // 允许某个域名访问我
    response.setHeader("Access-Control-Allow-Origin", "*"); // 允许所有域名访问我

    • 1
    • 2

    方案二：jsonp

    • jsonp：json with padding（带填充的json）
    • jsonp不是ajax请求，但是可以完成局部刷新的效果，并且可以解决跨域问题。
    • 注意：jsonp解决跨域的时候，只支持GET请求。不支持post请求。
    • 原理：script标签的src属性值可以是URL，作用是访问某个servlet，后端servlet响应该请求并返回一个字符串到标签中，浏览器接收到这个字符串后，会自动将字符串当做JS代码执行。
      如果后端响应的字符串是一段JS代码的字符串，那么就能实现JS的一系列操作，例如使用innerHTML方法动态生成标签的值、调用前端创建的函数等，类似ajax异步刷新。
    • 例子：用户点击按钮后从后端接收数据展示到前端。这里后端接收的数据是一个前端早已写好的函数。
      请添加图片描述
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsonp跨域问题title>
head>
<body>
  <script type="text/javascript">
    function dosome(myjson){//这是我们自己写的函数，一会后端返回的JS代码是fun(json)，然后调用我们这个函数给div标签内容赋值
      document.getElementById("mydiv").innerHTML = myjson.name;
    }
    window.onload =() => {//箭头函数
      document.getElementById("btn").onclick = () =>{//箭头函数，点击按钮创建一个