老生常谈的跨域处理

跨域处理是指浏览器限制页面从其他源加载资源的一种安全机制。例如，如果一个页面向外部的不同域名的接口发送Ajax请求获取数据，由于同源策略的限制，请求将会被浏览器拦截。

跨域处理是指浏览器限制页面从其他源加载资源的一种安全机制。例如，如果一个页面向外部的不同域名的接口发送Ajax请求获取数据，由于同源策略的限制，请求将会被浏览器拦截。

为了解决这个问题，我们需要采取一些跨域处理的方式。下面分别介绍几种跨域处理方案。

一、JSONP

JSONP是通过动态添加<script>标签，以请求JSON数据的一种处理方式。由于<script>标签没有“同源策略”的限制，因此可以通过动态创建script标签的方式从其他域名获取JSON数据。

JSONP的实现步骤如下：

1.在客户端定义好回调函数

function handleJSONP(data){
    console.log(data);
}

2.在客户端动态添加<script>标签

let script = document.createElement('script');
let url = 'http://api.example.com?callback=handleJSONP';
script.src = url;
document.body.appendChild(script);

3.在服务端返回JSON数据，并将数据作为参数传递给回调函数

服务端应该返回的数据格式为：

handleJSONP({key: value});

二、CORS

CORS（Cross-Origin Resource Sharing）是一个基于HTTP头部的机制。它允许服务器控制和指定允许访问该服务器资源的域名列表，从而允许跨域访问。

要使用CORS，需要在服务端开启CORS支持，主要有以下两种方式：

A、在服务端设置响应头

服务端设置响应头，允许指定的域名进行访问。

Access-Control-Allow-Origin: http://example.com

如果要让所有域名都可以访问，可以设置如下：

Access-Control-Allow-Origin: *

B、使用框架提供的方法

许多框架如Express、Koa、Spring等，都提供了便捷地设置CORS的方法。

Express：

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

app.use(cors({
  origin: 'http://example.com'
}))

Koa：

const Koa = require('koa');
const cors = require('@koa/cors');
const app = new Koa();

app.use(cors({
  origin: 'http://example.com'
}));

Spring：

@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {
   @Override
   public void addCorsMappings(CorsRegistry registry) {
       registry.addMapping("/**").allowedOrigins("http://example.com");
   }
}

三、反向代理

反向代理是将客户端发起的请求转发给目标域名的方法，在目标域名进行数据请求并返回给客户端，隐藏了客户端的真实IP地址。反向代理的好处有很多，其中一点就是可以解决跨域问题。

例如：客户端请求http://example.com/api/data数据，但是此请求是跨域的，无法执行。使用反向代理，将请求发送给自己的服务端，再由服务端将请求转发到目标地址http://example.com/api/data，获取数据，并返回给客户端。这样既保留了客户端的请求方式，又解决了跨域问题。

const http = require('http');

http.createServer(function(req, res){
  const options = {
    hostname: 'example.com',
    path: '/api/data'
  };

  const p = http.request(options, function(response){
    var str = '';
    response.on('data', function(chunk){
      str += chunk;
    });
    response.on('end', function(){
      res.end(str);
    });
  });

  p.end();
}).listen(3000);

以上是三种常用的跨域处理方式，可以根据实际情况进行选择。