跨域解决方法

什么是同源策略

如果两个URL的协议、域名和端口都相同，我们就称这两个URL同源

同源策略就是浏览器的一个安全限制，它阻止了两个不同的源之间进行的数据交互

【1】无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB

【2】无法接触非同源网页的 DOM

【3】无法向非同源地址发送 AJAX 请求

什么是跨域

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。在前后端分离的模式下，前后端的域名是不一致的，此时就会发生跨域访问问题。

当前页面url	被请求页面url	是否跨域	原因
http://www.test.com/	http://www.test.com/index.html	否	同源（协议、域名、端口号相同）
http://www.test.com/	https://www.test.com/index.html	跨域	协议不同（http/https）
http://www.test.com/	百度一下，你就知道	跨域	主域名不同（test/baidu）
http://www.test.com/	http://blog.test.com/	跨域	子域名不同（www/blog）
http://www.test.com:8080/	http://www.test.com:7001/	跨域	端口号不同（8080/7001）

跨域解决方法

1.JSONP

JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，兼容性好（兼容低版本IE），缺点是只支持get请求，不支持post请求。

核心思想：网页通过添加一个<script>元素，向服务器请求 JSON 数据，服务器收到请求后，将数据放在一个指定名字的回调函数的参数位置传回来。

1) jQuery ajax：

$.ajax({
    url: 'http://www.test.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  // 请求方式为jsonp
    jsonpCallback: "handleCallback",    // 自定义回调函数名
    data: {}
});

2)Vue.js

this.$http.jsonp('http://www.domain2.com:8080/login', {
    params: {},
    jsonp: 'handleCallback'
}).then((res) => {
    console.log(res); 
})

2.webpack本地代理

在webpack.config.js中利用 WebpackDevServer 配置本地代理

如下简单配置案例，这样 http://localhost:8080/api/getUser.php 的请求就是后端的接口 http://192.168.25.20:8088/getUser.php

devServer: {
        port: 8080,
        proxy: {
            "/api": {
              target: "http://192.168.25.20:8088" // 后端接口
            }
        }
    }

3.CORS

CORS 是跨域资源分享（Cross-Origin Resource Sharing）的缩写。它是 W3C 标准，属于跨源 AJAX 请求的根本解决方法。

先发出一个预检请求。浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些请求方法和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。"预检"请求用的请求方法是OPTIONS，表示这个请求是用来询问的。头信息里面，关键字段是Origin，表示请求来自哪个源。

3.1.配置方式

1）Access-Control-Allow-Origin：表示谁可以请求数据。该字段也可以设为http://192.168.25.20:8088表示同意http://192.168.25.20:8088访问；设置*表示任意跨源请求可以访问。

2）Access-Control-Allow-Methods：表明服务器支持的所有跨域请求的方法如：GET, POST, PUT等。

3）Access-Control-Allow-Headers：表明服务器支持的所有头信息字段，不限于浏览器在"预检"中请求的字段。

4）Access-Control-Max-Age： 用来指定本次预检请求的有效期，单位为秒。

3.2.springboot注解

使用注解@CrossOrigin

 4.手动代理跨域

前端发请求给A服务器，A服务器使用远程调用访问B服务器

A服务器中手动写一个controller定义URL规则，以api开头的进入这个接口，通过远程调用，调用B服务器。

5.nginx反向代理

修改配置文件nginx.conf

server {
 
    #nginx监听所有localhost:8080端口收到的请求
    listen       8080;
    server_name  localhost;
 
    # Load configuration files for the default server block.
    include /etc/nginx/default.d/*.conf;
    #localhost:8080 会被转发到这里
    #同时, 后端程序会接收到 "192.168.25.20:8088"这样的请求url
    location / {
        proxy_pass http://192.168.25.20:8088;
    }
    #localhost:8080/api/ 会被转发到这里
    #同时, 后端程序会接收到 "192.168.25.20:9000/api/"这样的请求url
    location /api/ {
        proxy_pass http://192.168.25.20:9000;
    }
    error_page 404 /404.html;
        location = /40x.html {
    }
    error_page 500 502 503 504 /50x.html;
        location = /50x.html {
    }
}