继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

【九月打卡】第十天 项目的跨域问题

userqiao
关注TA
已关注
手记 35
粉丝 1
获赞 3

课程名称:Spring Cloud 进阶 Alibaba 微服务体系自媒体实战
课程章节: 第3章 开发通行证有关服务
主讲老师: 风间影月

课程内容

本章节主要讲的是跨域问题。浏览器会限制对域名的调用,不同的域名发起请求到不同的接口会出现跨域问题,为了解决这一问题,可以通过springboot来解决,主要开放限制域名为*,也就是所有进行调用接口。此配置类为项目配置,可以直接放入任何项目中即可使用。

具体使用代码如下:

package com.imooc.api.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {

    public CorsConfig() {
    }

    @Bean
    public CorsFilter corsFilter() {
        // 1. 添加cors配置信息
        CorsConfiguration config = new CorsConfiguration();
        config.addAllowedOrigin("*");
        // 设置是否发送cookie信息
        config.setAllowCredentials(true);
        // 设置允许请求的方式
        config.addAllowedMethod("*");
        // 设置允许的header
        config.addAllowedHeader("*");
        // 2. 为url添加映射路径
        UrlBasedCorsConfigurationSource corsSource = new UrlBasedCorsConfigurationSource();
        corsSource.registerCorsConfiguration("/**", config);
        // 3. 返回重新定义好的corsSource
        return new CorsFilter(corsSource);
    }

}

课程收获

跨域问题的几种解决方式?

1. JSONP:
JSONP 就是跨域的一种实现方式。(JSONP 全称 JSON with Padding,是数据格式 JSON 的一种 “使用模式”,可用于解决主流浏览器的跨域数据访问的问题。)
JSONP 是一种非正式传输协议,该协议的一个要点就是允许用户传递一个 callback 参数给服务端,然后服务端返回数据时会将这个 callback 参数作为函数名来包裹住 JSON 数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。

2、CORS
CORS 全称 Cross-Origin Resource Sharing,即:跨来源资源共享。它是一份浏览器技术的规范,提供了Web服务从不同网域传来沙盒脚本的方法,以避开浏览器的同源策略,是JSONP模式的现代版。

3、降域
降域仍是解决跨域问题的一种方案,通过双向设置 document.domain 的值,解决主域名下的跨域问题

4、nginx代理跨域(服务器代理)

跨域原理: 同源策略是浏览器的安全策略,不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议,不会执行JS脚本,不需要同源策略,也就不存在跨越问题。

实现思路:通过nginx配置一个代理服务器(域名与domain1相同,端口不同)做跳板机,反向代理访问domain2接口,并且可以顺便修改cookie中domain信息,方便当前域cookie写入,实现跨域登录。

课程截屏

http://img4.mukewang.com/6323365a00014dbc09960506.jpg


http://img1.mukewang.com/63233666000138b610010500.jpg

http://img2.mukewang.com/632336700001c34610100517.jpg

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP