最常见的六种跨域解决方案

Posted 2023-03-30 China_YF

目录：

• 前言：什么是跨域？
• JSONP
• CORS
• 搭建Node代理服务器
• nginx反向代理
• postMessage
• Websocket
• 总结

前言：什么是跨域？

跨域就是当在页面上发送ajax请求时，由于浏览器同源策略的限制，要求当前页面和服务端必须同源，也就是协议、域名和端口号必须一致。

如果协议、域名和端口号中有其中一个不一致，则浏览器视为跨域，进行拦截。

1、JSONP方式解决跨域：

jsonp的原理就是利用了script标签不受浏览器同源策略的限制，然后和后端一起配合来解决跨域问题的。

具体的实现就是在客户端创建一个script标签，然后把请求后端的接口拼接一个回调函数名称作为参数传给后端，并且赋值给script标签的src属性，然后把script标签添加到body中，当后端接收到客户端的请求时，会解析得到回调函数名称，然后把数据和回调函数名称拼接成函数调用的形式返回，客户端解析后会调用定义好的回调函数，然后在回调函数中就可以获取到后端返回的数据了。

页面中可能会存在多个jsonp，所以可以封装一个jsonp方法，客户端代码如下：

<script>
    // 封装一个jsonp函数
    function jsonp(url, params, callback) 
        return new Promise((resolve, reject) => 
            // 定义回调函数
            window[callback] = function(data) 
                resolve(data)
            
          
            const script = document.createElement('script') // 创建script标签
            params = ...params, callback
            const arr = []
            for(const key in params) 
                if(params.hasOwnProperty(key))  // 判断当前key是否是params对象自身的属性，有可能会是原型上的属性，所以需要判断一下
                    arr.push(`$key=$params[key]`)
                
            
            url += `?$arr.join('&')` // 拼接参数
            script.async = true
            script.src = url
            document.body.appendChild(script)
            script.onload = () => 
                document.body.removeChild(script)
            
        )
    
	// 使用jsonp
    jsonp(
        url: 'http://127.0.0.1:8081/user',
        params:id: '1',
        callback: 'getUserData'
    ).then(res => 
        console.log('res:', res)
    )
</script>

服务端代码如下(nodeJS)：

const http = require('http')
const url = require('url')

// 创建server
const server = http.createServer()
// 监听http请求
server.on('request', (req, res) => 
    // 获取客户端传来的回调函数名称
    const callback = url.parse(req.url, true).query
    const user =  // 模拟返回数据
        id: 1, 
        name: 'zhangsan',
        age: 12
    
    // 把数据和回调函数名称拼接成函数调用的方式返回
    const result = `$callback($JSON.stringify(user))`
    res.end(result)
)

// 设置监听端口
server.listen(8081, function() 
    console.log('server is running on 8081 port！')
)

jsonp的优点就是兼容性好，可以解决主流浏览器的跨域问题，缺点是仅支持GET请求，不安全，可能遭受xss攻击。

2、CORS方式解决跨域：

cors是跨域资源共享，是一种基于 HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其它 origin（域，协议和端口），使得浏览器允许这些 origin 访问加载自己的资源。服务端设置了Access-Control-Allow-Origin就开启了CORS，所以这种方式只要后端实现了CORS，就解决跨域问题，前端不需要配置。

服务端设置Access-Control-Allow-Origin响应头即可，服务端代码如下：

const http = require('http')
const url = require('url')
// 创建server
const server = http.createServer()
// 定义跨域访问白名单
const authOrigin = ['http://127.0.0.1:5500']

// 监听http请求
server.on('request', (req, res) => 
    const user =  // 模拟返回数据
        id: 1, 
        name: 'zhangsan',
        age: 12
    
    const origin = req.headers.origin
    if(authOrigin.includes(origin)) 
        // 添加响应头，实现cors
        // res.setHeader('Access-Control-Allow-Origin', '*') // 允许所有的地址跨域访问
        res.setHeader('Access-Control-Allow-Origin', origin) // 只有白名单中的地址才可以跨域访问
    
    res.end(JSON.stringify(user))
)

// 设置监听端口
server.listen(8081, function() 
    console.log('server is running on 8081 port！')
)

当客户端访问时服务端接口时，就可以看到响应头中服务端配置的Access-Control-Allow-Origin：

CORS方式解决跨域问题比较常用，只需要后端配置响应头Access-Control-Allow-Origin，前端无需配置，实现简单。

3、搭建Node代理服务器解决跨域：

因为同源策略是浏览器限制的，所以服务端请求服务器是不受浏览器同源策略的限制的，因此我们可以搭建一个自己的node服务器来代理访问服务器。

大概的流程就是：我们在客户端请求自己的node代理服务器，然后在node代理服务器中转发客户端的请求访问服务器，服务器处理请求后给代理服务器响应数据，然后在代理服务器中把服务器响应的数据再返回给客户端。客户端和自己搭建的代理服务器之间也存在跨域问题，所以需要在代理服务器中设置CORS。

基本的工作流程如下：

客户端代码如下：

<!-- 引入axios发送请求 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    // 简单封装一个axios向代理服务器发送请求
    function proxyAxios(data) 
        return axios(
            url: 'http://localhost:8081/proxyApi', // 请求自己搭建的node代理服务器的地址
            method: 'POST',
            headers:  'content-type': 'application/x-www-form-urlencoded' ,
            data
        )
    

    // 使用node代理服务器向服务器发送请求
    proxyAxios(
        url: 'https://class.imooc.com/getadver',// 需要代理访问真实服务器的url
        method: 'GET',
    ).then(res => 
        console.log('res:', res)
    ).catch(err => 
        console.log(err)
    )
</script>

node服务器代码如下：

/**通过nodeJS搭建自己的代理服务器来解决跨域问题 */
const axios = require('axios')
const express = require('express')
const bodyParser = require('body-parser')
const app = express()
// 使用第三方插件
app.use(bodyParser.urlencoded(extended: false))
app.use(bodyParser.json())

// 监听post请求,处理代理接口
app.post('/proxyApi', (req, res) => 
    const body = req
	// 获取post请求的请求参数
    let reqParams = 
	  for(const key in body) 
        reqParams = JSON.parse(key) // 获取到请求参数
    

    // 设置响应头
    // 代理服务器设置CORS，允许跨域访问
    res.setHeader('Access-Control-Allow-Origin', '*') 
    res.setHeader('Access-Control-Allow-Methods', '*') // 允许所有的请求方式

    const url, method = "GET", ...resConfig = reqParams || 
     // node代理请求服务器
     axios(
        url,
        method,
        ...resConfig
      ).then(result => 
        const status, headers, data = result
        res.status(status)
        res.setHeader('content-type', headers['content-type'])
        res.end(JSON.stringify(data)) // 给客户端返回数据
      ).catch(err => 
        res.end(JSON.stringify(err))
      )
)

// 监听请求
app.listen(8081, () => 
	console.log('服务启动成功，在8081端口监听请求....')
)

4、Nginx反向代理解决跨域：

nginx通过反向代理解决跨域也是利用了服务器请求服务器不受浏览器同源策略的限制实现的。

客户端请求nginx服务器，在nginx.conf配置文件中配置server监听客户端的请求，然后把location匹配的路径代理到真实的服务器，服务器处理请求后返回数据，nginx再把数据给客户端返回。大致流程如下：

nginx.conf配置文件中的配置：

前端代码如下：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios(
        url: 'http://localhost:8082/api', // 向nginx服务器发送请求
        method: 'get'
    ).then(res => 
        console.log('res:', res)
    ).catch(err => 
        console.log('err:', err)
    )
</script>

最终要访问的服务端代码如下：

const express = require('express')
const app = express()

app.get('/api', (req, res) => 
  const user =  // 模拟返回数据
    id: 1, 
    name: 'zhangsan',
    age: 12
  
  res.end(JSON.stringify(user))
)

// 监听请求
app.listen(8081, () => 
	console.log('服务启动成功，在8081端口监听请求....')
)

nginx反向代理方式和node中间件代理方式的原理其实差不多，都是利用了服务器和服务器之间通信不受浏览器的同源策略的限制，但是node代理方式相对复杂一些，还要自己搭建一个node服务器，而用nginx只需要修改nginx.conf配置文件即可解决跨域问题。

5、postMessage方式解决跨域:

window.postMessage() 方法可以安全地实现跨源通信，此方法一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。

主要的用途是实现多窗口，多文档之间通信：

1. 页面和其打开的新窗口的数据传递
2. 多窗口之间消息传递
3. 页面与嵌套的 iframe 消息传递

具体的用法请查看：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

接下来实现一个页面与嵌套的 iframe 消息传递的示例：

index.html页面代码如下：http://127.0.0.1:5500

<body> 
    <h2>index页面</h2>
    <iframe
        src="http://localhost:3000"
        frameborder="0"
        id="iframe"
        onload="load()"
        ></iframe>
</body>
<script>
    window.addEventListener('message', ev => 
        const data, origin, source = ev
        if(origin !== 'http://localhost:3000') return
        console.log('接收iframe页面发送的消息：', data)

    )
    function load() 
        iframe.contentWindow.postMessage("给iframe页面发送的消息", "http://localhost:3000");
    
</script>

iframe页面的代码如下：http://localhost:3000

<body>
    <h1>iframe嵌入的页面</h1>
</body>
<script>
    window.addEventListener('message', ev => 
        const data, origin, source = ev
        if(origin !== 'http://127.0.0.1:5500') return
        console.log('接收到index页面发送的消息:', data)
        source.postMessage('给index页面发送的消息', origin)
    )
</script>

使用postMessage向其它窗口发送数据的时候需要注意的就是，应该始终指定精确的目标 origin，而不是 *，使用window监听message事件，接收其他网站发送的 message时，请始终使用 origin 和 source 属性验证发件人的身份。

6、Websocket方式解决跨域：

使用Websocket也可以解决跨域问题，因为WebSocket本身不存在跨域问题，所以我们可以利用webSocket来进行非同源之间的通信，

WebSocket 规范定义了一个在 Web 浏览器和服务器之间建立“套接字”连接的 API。 简单来说：客户端和服务器之间存在持久连接，双方可以随时开始发送数据。

WebSocket 的基本使用如下，前端代码：

<script>
    const ws = new WebSocket('ws://localhost:8081')
    // 当连接打开时，向服务器发送一些数据
    ws.onopen = () => 
        ws.send('Hi!') // 使用send方法向服务端发送内容
    

    // 监听错误
    ws.onerror =  error => 
        console.log('WebSocket Error ' + error);
    ;

    // 监听服务端发送的数据
    ws.onmessage =  e => 
        console.log('Server: ' + e.data);
    ;
</script>

服务端代码如下：

// WebSocket服务
const WebSocket = require("ws");

const server = new WebSocket.Server( port: 8081 );

server.on("connection", function(socket) 
  // 监听客户端发送的消息
  socket.on("message", function(data) 
    console.log('clent data:', data)
    socket.send(data); // 向客户端发送消息
  );
);

注意：

• 服务端需要通过npm install ws 来安装ws模块
• 在使用ws的时候发现服务端接收到客户端的数据是二进制，而服务端给客户端返回的数据也是二进制，
  
  解决这个问题的办法就是安装低版本的webSocket依赖，我之前安装的是8.8.1版本的就会出现这个问题，后来切换为7.3.0并重新npm i 和重新启动服务就可以解决这个问题了。
  

总结：

• jsonp的原理是利用了script标签不受浏览器同源策略的限制，img和link标签也是不受浏览器同源策略限制的。
• 跨域是浏览器限制，服务端和服务端之间通信是不受浏览器同源策略限制的。
• 所有跨域的解决方案都是需要服务端配合的。
• 最常用的跨域解决方案是CORS、Node代理服务器和Nginx反向代理方式。
• postMessage更多的是用在多个文档，窗口之间发送数据。

Java程序员注意——审查Java代码的六种常见错误

代码审查是消灭Bug最重要的方法之一，这些审查在大多数时候都特别奏效。由于代码审查本身所针对的对象，就是俯瞰整个代码在测试过程中的问题和Bug。并且，代码审查对消除一些特别细节的错误大有裨益，尤其是那些能够容易在阅读代码的时候发现的错误，这些错误往往不容易通过机器上的测试识别出来。本文就常见的Java代码中容易出现的问题提出一些建设性建议，以便您在审查代码的过程中注意到这些常见的细节性错误。

通常给别人的工作挑错要比找自己的错容易些。别样视角的存在也解释了为什么作者需要编辑，而运动员需要教练的原因。不仅不应当拒绝别人的批评，我们应该欢迎别人来发现并指出我们的编程工作中的不足之处，我们会受益匪浅的。

正规的代码审查(code inspection)是提高代码质量的最强大的技术之一，代码审查—由同事们寻找代码中的错误—所发现的错误与在测试中所发现的错误不同，因此两者的关系是互补的，而非竞争的。

如果审查者能够有意识地寻找特定的错误，而不是靠漫无目的的浏览代码来发现错误，那么代码审查的效果会事半功倍。在这篇文章中，我列出了6个Java编程中常见的错误。你可以把这些错误添加到你的代码审查的检查列表(checklist)中，这样在经过代码审查后，你可以确信你的代码中不再存在这类错误了。

一、常见错误1# ：多次拷贝字符串

测试所不能发现的一个错误是生成不可变(immutable)对象的多份拷贝。不可变对象是不可改变的，因此不需要拷贝它。最常用的不可变对象是String。

如果你必须改变一个String对象的内容，你应该使用StringBuffer。下面的代码会正常工作：

String s = new String ("Text here");

但是，这段代码性能差，而且没有必要这么复杂。你还可以用以下的方式来重写上面的代码：

String temp = "Text here"; 
String s = new String (temp);

但是这段代码包含额外的String，并非完全必要。更好的代码为：

String s = "Text here";

二、常见错误2#： 没有克隆(clone)返回的对象

封装(encapsulation)是面向对象编程的重要概念。不幸的是，Java为不小心打破封装提供了方便——Java允许返回私有数据的引用(reference)。下面的代码揭示了这一点：

import java.awt.Dimension;
/***Example class.The x and y values should never*be negative.*/
public class Example
    　 private Dimension d = new Dimension (0, 0);
    　 public Example ()
    
    　 
    /*** Set height and width. Both height and width must be nonnegative * or an exception is thrown.*/
    　 public synchronized void setValues (int height,int width) throws IllegalArgumentException
        　　 if (height < 0 || width < 0) 
        　　　 throw new IllegalArgumentException();
        　　　 d.height = height;
        　　 d.width = width;
        　
    
    　 public synchronized Dimension getValues()
        　　 // Ooops! Breaks encapsulation 
        　　 return d;
        　
    

Example类保证了它所存储的height和width值永远非负数，试图使用setValues()方法来设置负值会触发异常。不幸的是，由于getValues()返回d的引用，而不是d的拷贝，你可以编写如下的破坏性代码：

Example ex = new Example();
Dimension d = ex.getValues();
d.height = -5;
d.width = -10;

现在，Example对象拥有负值了！如果getValues() 的调用者永远也不设置返回的Dimension对象的width 和height值，那么仅凭测试是不可能检测到这类的错误。

不幸的是，随着时间的推移，客户代码可能会改变返回的Dimension对象的值，这个时候，追寻错误的根源是件枯燥且费时的事情，尤其是在多线程环境中。

更好的方式是让getValues()返回拷贝：

public synchronized Dimension getValues()
    return new Dimension (d.x, d.y);

现在，Example对象的内部状态就安全了。调用者可以根据需要改变它所得到的拷贝的状态，但是要修改Example对象的内部状态，必须通过setValues()才可以。

三、常见错误3#：不必要的克隆

我们现在知道了get方法应该返回内部数据对象的拷贝，而不是引用。但是，事情没有绝对：

/*** Example class.The value should never * be negative.*/
public class Example
    　 private Integer i = new Integer (0);
    　 public Example ()
    
    　 
    /*** Set x. x must be nonnegative* or an exception will be thrown*/
    　 public synchronized void setValues (int x) throws IllegalArgumentException
        　　 if (x < 0) 
        　　　 throw new IllegalArgumentException();
        　　　 i = new Integer (x);
        　
    
    　 public synchronized Integer getValue()
        　　 // We can’t clone Integers so we makea copy this way. 
        　　 return new Integer (i.intValue());
        　
    

这段代码是安全的，但是就象在错误1#那样，又作了多余的工作。Integer对象，就象String对象那样，一旦被创建就是不可变的。因此，返回内部Integer对象，而不是它的拷贝，也是安全的。

方法getValue()应该被写为：

public synchronized Integer getValue()
    // ’i’ is immutable, so it is safe to return it instead of a copy. 
    return i;

Java程序比C++程序包含更多的不可变对象。JDK 所提供的若干不可变类包括：

• Boolean
• Byte
• Character
• Class
• Double
• Float
• Integer
• Long
• Short
• String
• 大部分的Exception的子类

四、常见错误4# ：自编代码来拷贝数组

Java允许你克隆数组，但是开发者通常会错误地编写如下的代码，问题在于如下的循环用三行做的事情，如果采用Object的clone方法用一行就可以完成：

public class Example
    　 private int[] copy;
    　 
    /*** Save a copy of ’data’. ’data’ cannot be null.*/
    　 public void saveCopy (int[] data)
        　　 copy = new int[data.length];
        　　 for (int i = 0; i < copy.length; ++i) 
        　　　 copy[i] = data[i];
        　
    

这段代码是正确的，但却不必要地复杂。saveCopy()的一个更好的实现是：

void saveCopy (int[] data)
    　 try
        　　 copy = (int[])data.clone();
        　
    
    catch (CloneNotSupportedException e)
        　　 // Can’t get here. 
        　
    

如果你经常克隆数组，编写如下的一个工具方法会是个好主意：

static int[] cloneArray (int[] data)
    　 try
        　　 return(int[])data.clone();
        　
    
    catch(CloneNotSupportedException e)
        　　 // Can’t get here. 
        　
    

这样的话，我们的saveCopy看起来就更简洁了：

void saveCopy (int[] data)
    　 copy = cloneArray ( data);

五、常见错误5#：拷贝错误的数据

有时候程序员知道必须返回一个拷贝，但是却不小心拷贝了错误的数据。由于仅仅做了部分的数据拷贝工作，下面的代码与程序员的意图有偏差：

import java.awt.Dimension;
/*** Example class. The height and width values should never * be 
negative. */
public class Example
    　 static final public int TOTAL_VALUES = 10;
    　 private Dimension[] d = new Dimension[TOTAL_VALUES];
    　 public Example ()
    
    　 
    /*** Set height and width. Both height and width must be nonnegative * or an exception will be thrown. */
    　 public synchronized void setValues (int index, int height, int width) throws IllegalArgumentException
        　　 if (height < 0 || width < 0) 
        　　　 throw new IllegalArgumentException();
        　　　 if (d[index] == null) 
        　　　　 d[index] = new Dimension();
        　　　　 d[index].height = height;
        　　　　 d[index].width = width;
        　
    
    　 public synchronized Dimension[] getValues() 
    　　 throws CloneNotSupportedException
        　　　 return (Dimension[])d.clone();
        　
    

这儿的问题在于getValues()方法仅仅克隆了数组，而没有克隆数组中包含的Dimension对象，因此，虽然调用者无法改变内部的数组使其元素指向不同的Dimension对象，但是调用者却可以改变内部的数组元素(也就是Dimension对象)的内容。方法getValues()的更好版本为：

public synchronized Dimension[] getValues() throws CloneNotSupportedException
    　 Dimension[] copy = (Dimension[])d.clone();
    　 for (int i = 0; i < copy.length; ++i)
        　　 // NOTE: Dimension isn’t cloneable. 
        　　 if (d != null) 
        　　　 copy[i] = new Dimension (d[i].height, d[i].width);
        　
    
    　 return copy;

在克隆原子类型数据的多维数组的时候，也会犯类似的错误。原子类型包括int,float等。简单的克隆int型的一维数组是正确的，如下所示：

public void store (int[] data) throws CloneNotSupportedException
    　 this.data = (int[])data.clone();
    　 // OK

拷贝int型的二维数组更复杂些。Java没有int型的二维数组，因此一个int型的二维数组实际上是一个这样的一维数组：它的类型为int[]。简单的克隆int[][]型的数组会犯与上面例子中getValues()方法第一版本同样的错误，因此应该避免这么做。下面的例子演示了在克隆int型二维数组时错误的和正确的做法：

public void wrongStore (int[][] data) throws CloneNotSupportedException
    　 this.data = (int[][])data.clone();
    // Not OK!

public void rightStore (int[][] data)
    　 // OK! 
    　 this.data = (int[][])data.clone();
    　 for (int i = 0; i < data.length; ++i)
        　　 if (data != null) 
        　　　 this.data[i] = (int[])data[i].clone();
        　
    

六、常见错误6#：检查new 操作的结果是否为null

Java编程新手有时候会检查new操作的结果是否为null。可能的检查代码为：

Integer i = new Integer (400);
if (i == null) 
throw new NullPointerException();

检查当然没什么错误，但却不必要，if和throw这两行代码完全是浪费，他们的唯一功用是让整个程序更臃肿，运行更慢。

C/C++程序员在开始写java程序的时候常常会这么做，这是由于检查C中malloc()的返回结果是必要的，不这样做就可能产生错误。检查C++中new操作的结果可能是一个好的编程行为，这依赖于异常是否被使能(许多编译器允许异常被禁止，在这种情况下new操作失败就会返回null)。在java 中，new 操作不允许返回null，如果真的返回null，很可能是虚拟机崩溃了，这时候即便检查返回结果也无济于事。

苏先生ii：专注于Java开发技术的研究与知识分享！

————END————