关于跨域,和跨域问题的完整解决方案

简介: 关于跨域,和跨域问题的完整解决方案

概念

跨域:浏览器对javascript的同源策略的限制,同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSRF等攻击。所谓的同源是指,域名、协议、端口均为相同。,即便两个不同的域名指向同一个ip地址,也非同源。

同源限制的行为有

  • Cookie、LocalStorage 和 IndexDB 无法读取
  • DOM 和 JS 对象无法获取
  • Ajax请求发送不出去

如下报错,即为跨域问题

跨域的原因

跨域原因 示例
域名不同 www.jd.com与www.taobao.com
域名相同,端口不同 www.jd.com:8080与www.jd.com:8081
二级域名不同 item.jd.com与miaosha.jd.com

http和https也属于跨域

为什么会有跨域问题

跨域不一定出现跨域问题,一个页面发起的ajax请求,只能是与当前页域名相同的路径,这能有效的组织跨站攻击

跨域问题的解决方案

前端

  • Jsonp
<script>
var script = document.createElement('script');
script.type = 'text/javascript';

// 传参并指定回调执行函数为onBack
script.src = 'http://www.....:8080/login?user=admin&callback=onBack';
document.head.appendChild(script);

// 回调执行函数
function onBack(res) {
    alert(JSON.stringify(res));
}
</script>

后端

  • CORS

增加配置类 TestCorsConfiguration.java

package com.test.gateway.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;

@Configuration
public class TestCorsConfiguration {

    @Bean
    public CorsFilter corsFilter(){
        //初始化配置对象
        CorsConfiguration configuration = new CorsConfiguration();
        //允许跨域的域名,如果要携带cookie,不能写*。*:代表所有域名都可以跨域访问

        configuration.addAllowedOrigin("http://manage.test.com");
        configuration.setAllowCredentials(true);//设置是否允许携带cookie
        configuration.addAllowedMethod("*");//代表所有的请求方法
        configuration.addAllowedHeader("*");//允许携带所有头信息


        //初始化cors配置源对象
        UrlBasedCorsConfigurationSource configurationSource =new UrlBasedCorsConfigurationSource();
        configurationSource.registerCorsConfiguration("/**",configuration);
        //返回实例,参数cors配置源对象
        return new CorsFilter(configurationSource);
    }
}

运维

  • nginx反向代理

因为比较简单,这里就不展示Nginx的解决方案了

小结

跨域未必会出现跨域问题,跨域的解决方案有很多,后端和前端都可以,我比较喜欢从后端解决这个问题呢,除了以上列出的方案还有其他的解决办法,一个问题有很多解决办法,从中找最优解吧。

相关实践学习
基于函数计算快速搭建Hexo博客系统
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
目录
相关文章
|
14天前
|
前端开发 JavaScript 安全
跨域的五种最常见解决方案
跨域的五种最常见解决方案
|
9月前
|
移动开发 前端开发 JavaScript
前端跨域的解决方案?
前端跨域的解决方案?
76 0
|
10月前
|
缓存 前端开发 JavaScript
跨域问题详解及解决方案
跨域问题详解及解决方案
448 0
|
10月前
|
移动开发 JSON 前端开发
前端跨域
跨域是指在浏览器中,一个页面的脚本试图去访问不同域名下的资源时,浏览器会阻止这种跨域的请求。这是为了保护用户的安全,防止恶意代码获取用户数据。但是,在一些场景下,我们需要进行跨域请求,这时就需要一些跨域解决方式。
|
移动开发 前端开发 JavaScript
跨域解决方案CORS
跨域解决方案CORS
138 0
|
移动开发 JavaScript 前端开发
前端常见跨域解决方案(全)
前端常见跨域解决方案(全)
766 0
|
存储 前端开发 JavaScript
什么是跨域?如何解决跨域问题?
什么是跨域?如何解决跨域问题?
717 0
什么是跨域?如何解决跨域问题?
|
安全 JavaScript 前端开发
什么是跨域,如何解决跨域?
还在等什么,快来一起讨论关注吧,公众号【八点半技术站】,欢迎加入社群
什么是跨域,如何解决跨域?
|
Web App开发 前端开发 JavaScript
前端跨域解决方案
前后端分离开发给我带来很多的便利,无论是前端同学还是后端同学对于此种开发方式都是举双手赞成的。因为这样我们后端同学不用被css js这一大堆的前端代码折磨了,前端也不用改个样式要开个后台服务。虽然如此方便,但对于前端还是有些问题需要解决的。比如跨域问题,今天在项目中本地局域网测试移动端,手机浏览器打开会出现跨域(pc端跨域已通过chrome设置解决了)。
|
安全 JavaScript 前端开发
什么是跨域?如何解决跨域?
解决好跨域,让我们愉快的开发吧
488 4
什么是跨域?如何解决跨域?