管理进化

什么是跨域问题

2022-03-04 · Worktile 项目协作工具

跨域问题指的是：浏览器不能执行其他网站的脚本的问题。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。所谓浏览器同源是指，域名，协议，端口均相同。解决跨域问题的方法有以下2种：1.前端方法就用jsonp；2.后端配置解决跨域。

解决跨域的方法：

1.前端方法就用jsonp

jsonp是前端解决跨域最实用的方法

原理就是html中 的link,href,src属性都是不受跨域影响的，link可以调用远程的css文件，href可以链接到随便的url上，图片的src可以随意引用图片，script的src属性可以随意引入不同源的js文件

看下面代码，a.html页面中有一个func1方法，打印参数ret

<body>

<script type="text/javascript">

function func1(ret){

console.log(ret)

}

</script>

<script src="http://192.168.100.150:8081/zhxZone/webmana/dict/jsonp.js" type="text/javascript" charset="utf-8"></script>

</body>

而引入的jsonp.js中的代码为：

func1(111)

可想而知结果会打印出 111，也就是说a页面获取到了jsonp.js中的数据，数据是以调用方法并将数据放到参数中返回来的

但是这样获取数据,必须a.html中的方法名与js中的引用方法名相同，这样就是麻烦很多，最好是a.html能将方法名动态的传给后台，后台返回的引入方法名就用我传给后台的方法名，这样就做到了由前台控制方法名

总之要做到的就是前台像正常调接口一样，后台要返回回来js代码即可。

2.后台配置解决跨域

要说前端解决跨域用jsonp最好，但我更喜欢通过配置后台设置

同样，因为我用的java，所有我只能列举java的配置方法

我用的是 maven，spring mvc

首先在pom.xml中引入依赖

<!--跨域依赖-->

<dependency>

<groupId>com.thetransactioncompany</groupId>

<artifactId>cors-filter</artifactId>

<version>1.7.1</version>

</dependency>

<dependency>

<groupId>com.thetransactioncompany</groupId>

<artifactId>java-property-utils</artifactId>

<version>1.9</version>

</dependency>

<dependency>

然后在web.xml配置过滤器

<!--为了允许跨域访问-->

<filter>

<filter-name>CorsFilter</filter-name>

<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>

</filter>

<filter-mapping>

<filter-name>CorsFilter</filter-name>

<url-pattern>/*</url-pattern>

</filter-mapping>

这样前端就可以尽情跨域请求数据了。

智齿客服