解决项目中的跨域问题

简介: 解决项目中的跨域问题

一、跨域是什么?

      解释跨域之前,先了解同源策略,简单描述是:域名,协议,端口相同。

     跨域的官方解释是:跨站http请求(Cross-site HTTP request),指发起请求的资源所在域不同于请求指向资源所在域的http请求,即不符合同源策略


二、什么情况下需要跨域


20180922123004119.png


从上面的表格中我们可以看出,协议、域名、端口三者之间任意一与当前页面地址不同都会引起跨域问题。

企业开发中出现跨域问题情况举例:



1、前后端分离的开发模式中,前后端联调,前端人员使用本地(http://localhost)调用后端准备的联调环境的服务(http:dmsdbj.com)。

2、当系统庞大,业务复杂时,很可能出现直接调用第三方的某些服务来完成业务功能。


三、解决方案

解决跨域有多种方法,在项目实战中使用过三种方式:Nginx,使用@CrossOrigin注解,过滤器

1、Nginx


使用Nginx做反向代理,www.baidu.com/index.html需要调用www.sina.com/server.php,可以写一个接口www.baidu.com/server.php;


站在巨人的肩膀上:https://www.cnblogs.com/bninp/p/5694277.html


2、@CrossOrigin注解

站在巨人肩膀上:https://www.cnblogs.com/mmzs/p/9167743.html



3、过滤器

使用CORS协议,在spring的web.xml中配置过滤器:

 <!--跨域过滤器 -->
    <filter>
        <filter-name>CORS</filter-name>
        <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
        <init-param>
            <param-name>cors.allowOrigin</param-name>
            <param-value>*</param-value>
        </init-param>
        <init-param>
            <param-name>cors.supportedMethods</param-name>
            <param-value>GET, POST, HEAD, PUT, DELETE</param-value>
        </init-param>
        <init-param>
            <param-name>cors.supportedHeaders</param-name>
            <param-value>Authorization,Accept, Origin,X-Requested-With, Content-Type, Last-Modified</param-value>
        </init-param>
        <init-param>
            <param-name>cors.exposedHeaders</param-name>
            <param-value>Set-Cookie</param-value>
        </init-param>
        <init-param>
            <param-name>cors.supportsCredentials</param-name>
            <param-value>true</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>CORS</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

推荐阅读:https://www.cnblogs.com/softidea/p/6108066.html 有源码分析

相关文章
|
9月前
|
JSON 前端开发 JavaScript
前端跨域问题
前端跨域问题
89 0
|
Web App开发 应用服务中间件 API
|
JavaScript 前端开发 中间件
前端解决跨域问题(9个方法)
前端解决跨域问题(9个方法)
1915 0
|
前端开发 Java API
前后端分离的跨域配置
前后端分离的跨域配置
|
Web App开发 JSON 前端开发
跨域问题总结
跨域问题总结
1059 0
跨域问题总结
|
JSON 前端开发 JavaScript
解决跨域问题
解决跨域问题
|
6月前
|
存储 JSON JavaScript
跨域问题
跨域问题
85 1
|
JSON Android开发 数据格式
|
Web App开发 前端开发
前端跨域问题解析
搞前段,不玩跨域,基本上不算是前端 首先看一个帖子: http://stackoverflow.com/questions/1481251/what-does-document-domain-document-domain-do 我翻译一下帖子里面用到的domain大法的原理 document.domain = document.domain 页面上有一个主页面,我们称之为top.html,里面ifream内嵌了一个other.html,如果他们两个窗口之间进行交互,就会跨域,因为域名不同。
978 0
|
9月前
|
JavaScript 安全 前端开发
js开发:请解释什么是跨域请求(CORS),以及如何解决跨域问题。
CORS是一种W3C标准,用于解决浏览器同源策略导致的跨域数据访问限制。它通过服务器在HTTP响应头添加标志允许特定源进行跨域请求。简单请求无需预检,而预检请求(OPTIONS)用于询问服务器是否接受非简单请求。服务器端配置响应头如`Access-Control-Allow-Origin`等实现CORS策略,客户端JavaScript则正常发起请求。若配置不当,浏览器将阻止跨域访问,保障安全。
131 2

热门文章

最新文章