解决项目中的跨域问题

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

一、跨域是什么?

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

     跨域的官方解释是:跨站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 有源码分析

相关文章
|
6月前
|
前端开发 API
uniapp中为什么会出现跨域问题,如何解决
uniapp中为什么会出现跨域问题,如何解决
2351 0
|
缓存 JSON 前端开发
CORS 详解,终于不用担心跨域问题了
CORS 详解,终于不用担心跨域问题了
4843 1
CORS 详解,终于不用担心跨域问题了
|
前端开发 中间件
ThinkPHP6.0处理前端请求跨域问题AllowCrossDomain
ThinkPHP6.0处理前端请求跨域问题AllowCrossDomain
477 0
|
3月前
|
存储 JSON JavaScript
跨域问题
跨域问题
59 1
|
26天前
|
JSON 前端开发 安全
跨域问题产生的原因以及解决方案
【10月更文挑战第9天】跨域问题是前端开发中不可避免的一个问题,了解其产生的原因以及掌握多种解决方案是非常重要的。在实际应用中,需要根据项目的具体情况和需求,选择合适的解决方案,并不断关注跨域问题的发展趋势,以便及时应对新的挑战。
|
4月前
|
存储 前端开发 JavaScript
跨域问题以及解决方案
跨域问题以及解决方案
69 0
|
11月前
|
JSON 前端开发 JavaScript
解决跨域问题
解决跨域问题
|
6月前
|
JSON 前端开发 JavaScript
前端跨域问题
前端跨域问题
72 0
|
JavaScript 前端开发 中间件
前端解决跨域问题(9个方法)
前端解决跨域问题(9个方法)
1708 0
|
Web App开发 JSON 前端开发
跨域问题总结
跨域问题总结
1031 0
跨域问题总结