跨域的五种解决方案

  • 什么是同源
    • 如果两个页面的协议域名和端口都相同 则两个页面具有相同的源
  • 同源策略
    • 如果不是同源就会跨域 如果请求不进行处理就会报错 Access-control-Allow-xxx
    • 如果同源 才会传给AJAX的success函数
    • 跨域可以发送出去 服务器可以接收 但是会丢掉数据 不给信息

1. JSONP

  • 直接通过script标签的src属性获取
    • script 导入的文件会立即执行
    • 注意 引入的 script 标签要在函数定义的后面
  • 缺点是只能是GET请求
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    # aaa.js  // 可以服务器上触发,这里本地测试
    aaa({
      name: 'zs',
      age: 10
    })
    # index.html
    <script>
      function aaa(data) {
        console.log(data); // {name: 'zs', age: 10}
      }
    </script>
    <script src="aaa.js?callback=aaa"></script>

2. CORS

  • 支持 GET 和 POST ,不兼容IE
  • 服务端在响应数据给浏览器的时候 ,在响应头添加一些字段,浏览器就会允许跨域了
  • 例如 nodejs的 express框架的 CORS
    1
    2
    3
    4
    5
    6
    7
    8
    9
    //express
    app.all('*', function (req, res, next) {
      res.header('Access-Control-Allow-Origin', '*');
      res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
      res.header('Access-Control-Allow-Headers', 'X-Requested-With');
      res.header('Access-Control-Allow-Headers', 'Content-Type');
      res.header('Access-Control-Allow-Headers', 'mytoken');
      next();
    });

3. Nginx转发

  • 一般直接在服务器上配置,将请求直接转发到同源的地方就不会跨域了
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    https://www.cnblogs.com/ysocean/p/9392908.html
    server{
       //监听9099端口
        listen 9099;
        // 本地的域名是localhost
        server_name localhost;
        //凡是localhost:9099/api这个样子的，都转发到真正的服务端地址http://baidu.com
        location ^~ /api {
            proxy_pass http://baidu.com;
        }    
    }

4. 本地反向代理

  • 本地开发阶段才能使用
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // https 需要配置 secure headers(这个就是target的地址)
      proxy: {
        '/api': {
          target: 'https://xxx.com', 
          changeOrigin: true,
          // pathRewrite: {'^/api': ''}   // 如果后端的请求路径也有 api  就需要重写
          secure: false,
          headers: {
            Referer: 'https://xxx.com',
          },
        },
      },

5. k8s Ingress

  • Ingress 为外部访问集群提供了一个 统一 入口，避免了对外暴露集群端口
  • 功能类似 Nginx，可以根据域名、路径把请求转发到不同的 Service
  • 可以配置 https
  • 如果是云服务商，会自动给你配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: simple-example
spec:
  ingressClassName: nginx
  rules:
  - host: tools.fun
    http:
      paths:
      - path: /easydoc
        pathType: Prefix
        backend:
          service:
            name: service1
            port:
              number: 4200
      - path: /svnbucket
        pathType: Prefix
        backend:
          service:
            name: service2
            port:
              number: 8080