关于跨域访问的解决方案

什么是跨域

浏览器对于javascript的同源策略的限制。

跨域原因	示例
域名不同	aaa.com和bbb.com
域名相同，端口不同	aaa.com:81和aaa.com:82
二级域名不同	a.aaa.com和b.aaa.com
协议不同	http和https

为什么有跨域问题

跨域不一定会有跨域问题。

跨域问题是浏览器对于ajax请求的一种安全限制，因此跨域问题是针对ajax的一种限制，一个页面发起的ajax请求，只能是于当前页同域名的路径，这能有效的阻止跨站攻击。

解决跨域问题的方案

方案一：jsonp

最早的解决方案，利用script标签可以跨域的原理实现，存在一定的局限性（需要服务的支持，只能发起GET请求）。

方案二：nginx反向代理

利用nginx反向代理把跨域为不跨域，支持各种请求方式。

缺点：需要在nginx进行额外配置，语义不清晰

方案三：CORS

规范化的跨域请求解决方案，安全可靠。

优势：

在服务端进行控制是否允许跨域，可自定义规则。

支持各种请求方式。

劣势：会产生额外的请求。

jsonp解决跨域问题

方式一：jquery的jsonp方式跨域请求

jsonp方式不支持POST方式跨域请求，就算指定成POST方式，会自动转为GET方式；而后端如果设置成POST方式了，那就请求不了了。

$(function(){
    var name='cc';
    var looks='handsome';
    $.ajax({
        url: "http://localhost:9090/student",
        type: "GET",
        data：{
            name:name,
            looks:looks
        },
        cache:false,　
        dataType: "jsonp",  //指定服务器返回的数据类型
        jsonp:'theFunction',//用以获得jsonp回调函数名的参数名(默认为:callback)
        jsonpCallback: "showData", //指定回调函数名称 
        success: function (data) { 
            console.info("调用success"); 
        }
    });
})

方式二：基于script标签实现跨域

凡是拥有src这个属性的标签都可以跨域例如<script><img><iframe>。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
            var message = function(data) {
                alert(data[1].title);
            };
        </script>
        <script type="text/javascript" src="http://web.cn/js/message.js"></script>
    </head>
    <body>
        <div id='testdiv'></div>
    </body>
</html>

方式三：vue.js

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

Nginx反向代理解决跨域问题

配置Nginx：/nginx-1.18.0/conf/nginx.conf

worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       80;
        server_name  manage.aaa.com;
       location / {
            proxy_pass http://127.0.0.1:8001;
            proxy_connect_timeout 600;
            proxy_read_timeout 600;
        }
        location /api {
            proxy_pass http://127.0.0.1:8002;
            proxy_connect_timeout 600;
            proxy_read_timeout 600;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

CORS解决跨域问题

什么是CORS

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

浏览器端：目前，所有浏览器都支持该功能（IE10以下不行）。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。

服务端：CORS通信与AJAX没有任何差别，因此你不需要改变以前的业务逻辑。只不过，浏览器会在请求中携带一些头信息，我们需要以此判断是否允许其跨域，然后在响应头中加入一些信息即可。这一般通过过滤器完成即可。

CORS的原理

浏览器会将ajax请求分为两类，其处理方案略有差异：简单请求、特殊请求。

简单请求

只要同时满足以下两个条件：

当浏览器发现发起的ajax请求是简单请求时，会在请求头中携带一个字段：Origin大条件，就属于简单请求。

（1）请求方法是以下三种之一：HEAD、GET、POST。

（2）HTTP的头信息不超出以下几种字段：Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type（只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain）。

当浏览器发现发起的ajax请求是简单请求时，会在请求头中携带一个字段：Origin。

Origin中会指出当前请求属于哪个域（协议+域名+端口）。服务会根据这个值决定是否允许其跨域。

如果服务器允许跨域，需要在返回的响应头中携带下面信息：

// 白名单（可接受的域），是一个具体域名或者*（代表任意域名），注意：需要携带cookie时不能设置为*
Access-Control-Allow-Origin: *
// 是否允许携带cookie，默认情况下，cors不会携带cookie，除非这个值是true
Access-Control-Allow-Credentials: false
Content-Type: text/html; charset=utf-8

要想操作cookie，需要满足3个条件：

①服务的响应头中需要携带Access-Control-Allow-Credentials并且为true。

②浏览器发起ajax需要指定withCredentials 为true。

③响应头中的Access-Control-Allow-Origin一定不能为*，必须是指定的域名。

特殊请求

不符合简单请求的条件，会被浏览器判定为特殊请求,，例如请求方式为PUT。

预检请求：特殊请求会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。

浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

一个“预检”请求的样板：

OPTIONS /cors HTTP/1.1
Origin: http://manage.leyou.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.leyou.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

与简单请求相比，除了Origin以外，多了两个头：Access-Control-Request-Method（接下来会用到的请求方式，比如PUT）、Access-Control-Request-Headers（会额外用到的头信息）。

预检请求的响应（服务的收到预检请求，如果许可跨域，会发出响应）：

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://manage.leyou.com
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Max-Age: 1728000
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain

除了Access-Control-Allow-Origin和Access-Control-Allow-Credentials以外，这里又额外多出3个头：Access-Control-Allow-Methods（允许访问的方式）、Access-Control-Allow-Headers（允许携带的头）、Access-Control-Max-Age（本次许可的有效时长，单位是秒，过期之前的ajax请求就无需再次进行预检了）。

如果浏览器得到上述响应，则认定为可以跨域，后续就跟简单请求的处理是一样的了。

java代码实现CORS

服务端可以通过拦截器统一实现，不必每次都去进行跨域判定的编写。

事实上，SpringMVC已经帮我们写好了CORS的跨域过滤器：CorsFilter ,内部已经实现了刚才所讲的判定逻辑，我们直接用就好了。

package com.test.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

/**
 * @Program: test
 * @Package: com.test.config
 * @ClassName: CorsConfiguration
 * @Description: Cors解决跨域问题
 * @Author: tankang
 * @Create: 2020-09-08 23:54
 */
@Configuration
public class CorsConfiguration {
    @Bean
    public CorsFilter corsFilter(){
        // 初始化cors配置对象
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("http://manage.aaa.com");// 允许跨域的域名，如果需要携带cookie，不能写*，*代表允许所有域名
        corsConfiguration.setAllowCredentials(true);// 允许携带cookie
        corsConfiguration.addAllowedMethod("*");// *代表所有的请求方法，get/post/put/delete ...
        corsConfiguration.addAllowedHeader("*");// 允许携带任何头信息
        // 初始化cors配置源对象
        UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
        // 返回corsFilter实例，参数cors配置源对象
        return new CorsFilter(urlBasedCorsConfigurationSource);
    }
}

posted @ 2020-09-09 10:16 谭康阅读(510) 评论(0) 收藏举报

刷新页面返回顶部

猫咪老师