CORS 跨域请求实现

原创 2018年04月16日 21:18:23

什么是CORS?

CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。

它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。

什么是跨域?

跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com 的资源。跨域的严格一点的定义是:只要 协议,域名,端口有任何一个的不同,就被当作是跨域

下面是一个dva + springboot 实现的跨域请求处理,直接上代码:

(1)服务端实现

@Configuration
public class CORSConfiguration {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurerAdapter() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedHeaders("*")
                        .allowedMethods("*")
                        .allowedOrigins(
                                "http://127.0.0.1:6001",
                                "http://127.0.0.1:7001"
                        )
                        .allowCredentials(true)
                        .maxAge(3600);
            }
        };
    }
}

(2)客户端实现:

if (options.url && options.url.indexOf('//') > -1) {
    const origin = `${options.url.split('//')[0]}//${options.url.split('//')[1].split('/')[0]}`
    if (window.location.origin !== origin) {
      if (CORS && CORS.indexOf(origin) > -1) {
        options.fetchType = 'CORS'
      } else if (YQL && YQL.indexOf(origin) > -1) {
        options.fetchType = 'YQL'
      } else {
        options.fetchType = 'JSONP'
      }
    }
  }

我们来看一下CORS的定义:

CORS: [
		'http://127.0.0.1:6001',
		'http://127.0.0.1:7001',
	],

只要是由 127.0.0.1 : 6001 端口 访问 7001 端口 的跨域请求就能成功,是不是很简单。

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/diu_brother/article/details/79966579

SpringMVC4 跨域 配置

SpringMVC4 跨域 配置
  • u013803262
  • u013803262
  • 2017-02-11 15:50:13
  • 6220

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

服务端解决跨域请求
  • james_wade63
  • james_wade63
  • 2016-03-01 13:57:02
  • 27668

Spring Boot Web应用开发 CORS 跨域请求支持

一、Web开发经常会遇到跨域问题,解决方案有:jsonp,iframe,CORS等等CORS与JSONP相比1、 JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求。2、 使用CORS...
  • Jerome_s
  • Jerome_s
  • 2017-01-25 21:21:11
  • 6503

跨域 CrossOrigin

@Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurerAdapter() { ...
  • yangyi1101
  • yangyi1101
  • 2017-08-17 10:25:59
  • 2821

java web项目使用CORS方法实现跨域请求方案

问题产生背景 需要实现这样一个需求,在当前站点中使用ajax发送一个请求到另一个站点获取数据。js中使用jquery的ajax如下: 1 2 3 4 5 6 7 8 9 10 ...
  • appppppen
  • appppppen
  • 2017-06-13 23:25:07
  • 1985

CORS实现跨域请求

原文地址:http://newhtml.net/using-cors/ 本文对cors的客户端和服务端的原理说的很tou...
  • XuWei_XuWei
  • XuWei_XuWei
  • 2014-06-10 14:02:49
  • 1667

解析@EnableWebMvc 、WebMvcConfigurationSupport和WebMvcConfigurationAdapter

解析@EnableWebMvc 、WebMvcConfigurationSupport和WebMvcConfigurationAdapter访问我的个人网站获取更多文章在spring-boot+spr...
  • pinebud55
  • pinebud55
  • 2016-12-01 13:41:10
  • 8420

SpringMVC解决跨域

SpringMVC解决跨域的两种方案 1. 什么是跨域2. 跨域的应用情景3. 通过注解的方式允许跨域4. 通过配置文件的方式允许跨域 1. 什么是跨域 跨域...
  • qq_26566331
  • qq_26566331
  • 2017-05-17 09:36:51
  • 377

跨域请求方式集锦--CORS跨域请求支持各种请求方式

同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。但是有时候跨域请求资源是合理的需求,本文尝试从多篇文章中汇总至今存在的所有跨域请求解...
  • a250758092
  • a250758092
  • 2017-06-26 14:36:15
  • 573

【fetch跨域请求】cors

当使用fetch 发起跨域请求时,CORS(跨域资源共享Cross-origin resource sharing)请求fetch const body = {name:"Good boy"}; f...
  • gdp12315
  • gdp12315
  • 2017-03-26 21:03:51
  • 6137
收藏助手
不良信息举报
您举报文章:CORS 跨域请求实现
举报原因:
原因补充:

(最多只允许输入30个字)