欢迎访问 生活随笔!

生活随笔

当前位置: 首页 > 编程资源 > 编程问答 >内容正文

编程问答

跨域理解及服务器端解决跨域问题

发布时间:2025/7/14 编程问答 50 豆豆
生活随笔 收集整理的这篇文章主要介绍了 跨域理解及服务器端解决跨域问题 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

1.跨域请求,就是这个服务器去拿另一个服务器的资源,另一个服务器的域名肯定和当前的服务器域名不一样嘛。

浏览器默认是不允许跨域请求的,是浏览器对JavaScript施加的安全限制。是浏览器对JavaScript施加的安全限制。是浏览器对JavaScript施加的安全限制。

由于浏览器同源策略,凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。

 

所谓同源是指,域名,协议,端口均相同,不明白没关系,举个栗子:

http://www.123.com/index.html 调用 http://www.123.com/server.PHP (非跨域)

http://www.123.com/index.html 调用 http://www.456.com/server.php (主域名不同:123/456,跨域)

http://abc.123.com/index.html 调用 http://def.123.com/server.php (子域名不同:abc/def,跨域)

http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php (端口不同:8080/8081,跨域)

http://www.123.com/index.html 调用 https://www.123.com/server.php (协议不同:http/https,跨域)

请注意:localhost和127.0.0.1虽然都指向本机,但也属于跨域。

浏览器执行javascript脚本时,会检查这个脚本属于哪个页面,如果不是同源页面,就不会被执行。

 

服务器端解决跨域问题的三种方法

跨域是指html文件所在的服务器与ajax请求的服务器是不同的ip+port,例如: 
- ‘192.168.1.1:8080’ 与 ‘192.168.1.2:8080’是不同的域。 
- ‘192.168.1.1:8080’ 与 ‘192.168.1.1:8081’是不同的域。

解决此类问题的方法很多,有需要客户端和服务端都要更改的,例如jsonp,iframe等等;有只需要客户端更改的,这种情况只能出现在hybrid app开发中,即通过调用native方法来进行网络请求;有只需要服务端配置的,下面介绍3种服务端配置的方法。

第一种

如果您使用的mvc框架是spring4.2以上的话,一个@CrossOrigin就可以搞定。将@CrossOrigin加到Controller上,那么这个Controller所有的请求都是支持跨域的,代码如下:

@Controller @CrossOrigin public class GreetingController {

将@CrossOrigin加到请求方法上,那么这个请求是支持跨域的,代码如下

@CrossOrigin@RequestMapping("/greeting")public @ResponseBody Greeting greeting(@RequestParam(required=false, defaultValue="World") String name) {

第二种

全局配置,也需要spring4.2以上。

@Beanpublic WebMvcConfigurer corsConfigurer() {return new WebMvcConfigurerAdapter() {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/greeting-javaconfig").allowedOrigins("http://localhost:9000");}};}

.addCorsMappings()中的参数代表支持跨域的url,.allowedOrigins()中的参数代表可以访问该接口的域名,设置为”*”可支持所有域。

第三种

这种方法就跟框架无关了,需要两个jar包,点击这里进行下载,两个jar包可以放的程序里,也可以放到tomcat中,然后将下面的配置写到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 > 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 >

 

总结

以上是生活随笔为你收集整理的跨域理解及服务器端解决跨域问题的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错,欢迎将生活随笔推荐给好友。