CORS 跨域 大白话阐述,以及解决措施

本文旨在通俗易懂的讲解什么是跨域(CORS),以及如何解决跨域问题。

首先,通过实例解释一下什么是跨域:

网络上的许多页面都会加载来自不同域的CSS样式表,图像和脚本等资源。

出于安全原因,浏览器限制从脚本内发起的跨源HTTP请求。因为浏览器采用的是同源策略。是浏览器对javaScript施加的安全限制。

什么是同源呢?就是指的  域名、协议、端口均相同。接下来举实例阐述

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脚本时,会检查这个脚本属于哪个页面,如果不是同源页面,就不会被执行。

当域名www.abc.com下的js代码去访问www.def.com域名下的资源,就会受到限制。

关于跨域(CORS)的阐述到此为止。

 

接下来,阐述一下如何解决跨域————注解@CrossOrigin

注解@CrossOrigin使用前提:

JDK1.8+

Spring4.2+

CrossOrigin源码解析:

@Target({ ElementType.METHOD, ElementType.TYPE })
@Retention(RetentionPolicy.RUNTIME)
@Documented
public @interface CrossOrigin {

    String[] DEFAULT_ORIGINS = { "*" };

    String[] DEFAULT_ALLOWED_HEADERS = { "*" };

    boolean DEFAULT_ALLOW_CREDENTIALS = true;

    long DEFAULT_MAX_AGE = 1800;


    /**
     * 同origins属性一样
     */
    @AliasFor("origins")
    String[] value() default {};

    /**
     * 所有支持域的集合,例如"http://domain1.com"。
     * <p>这些值都显示在请求头中的Access-Control-Allow-Origin
     * "*"代表所有域的请求都支持
     * <p>如果没有定义,所有请求的域都支持
     * @see #value
     */
    @AliasFor("value")
    String[] origins() default {};

    /**
     * 允许请求头重的header,默认都支持
     */
    String[] allowedHeaders() default {};

    /**
     * 响应头中允许访问的header,默认为空
     */
    String[] exposedHeaders() default {};

    /**
     * 请求支持的方法,例如"{RequestMethod.GET, RequestMethod.POST}"}。
     * 默认支持RequestMapping中设置的方法
     */
    RequestMethod[] methods() default {};

    /**
     * 是否允许cookie随请求发送,使用时必须指定具体的域
     */
    String allowCredentials() default "";

    /**
     * 预请求的结果的有效期,默认30分钟
     */
    long maxAge() default -1;

}

@CrossOrigin使用:

package com.example.demo.controller;

import com.example.demo.domain.User;
import com.example.demo.service.IUserFind;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import javax.annotation.Resource;

/**
 * @Title: UserController
 * @ProjectName demo
 * @Description: 请求处理控制器
 * @author 浅然
 * @date 2018/7/2022:18
**/
@RestController
//实现跨域注解
//origin="*"代表所有域名都可访问
//maxAge飞行前响应的缓存持续时间的最大年龄,简单来说就是Cookie的有效期 单位为秒
//若maxAge是负数,则代表为临时Cookie,不会被持久化,Cookie信息保存在浏览器内存中,浏览器关闭Cookie就消失
@CrossOrigin(origins = "*",maxAge = 3600)
public class UserController {
    @Resource
    private IUserFind userFind;

    @GetMapping("finduser")
    public User finduser(@RequestParam(value="id") Integer id){
        //此处省略相应代码
    }
}

文章到此为止,如有不当之处,欢迎各位指正哈。

参考网址:

https://blog.csdn.net/w_linux/article/details/81142413

https://www.cnblogs.com/sjxbg/p/10297250.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章