Web跨域问题

目录

一、引言

在web开发的过程中,因为前后端的分离我们经常会遇到跨域问题,从而导致前后端的数据无法互通,那么跨域问题究竟是什么,而他又如何解决呢?

二、跨域问题

1.同源策略

用户输入的URL中包含的协议、域名、端口都完全相同。如果有一项不同,浏览器就会觉得有安全风险。

2.跨域

跨域(CORS)是指不同域名之间相互访问。跨域,指的是浏览器不能执行其他网站的脚本,它是由浏览器的同源策略所造成的,是浏览器对于JavaScript所定义的安全限制策略。

3.出现跨域问题的情况

  • 同一协议
  • 同一IP地址
  • 同一端口

以上三条中任一条件不满足就会出现跨域问题。

三、解决方案

跨域问题的解决方法针对不同的web项目有很多种,本文我们主要介绍普通web项目和spring boot项目的跨域问题如何解决。

1.普通web,使用Filter过滤器

使用Filter过滤器来过滤服务请求,向请求端设置Response Header(响应头部)的Access-Control-Allow-Origin属性声明允许跨域访问。

java 复制代码
@WebFilter("/*")
public class TestFilter implements Filter {
    public void init(FilterConfig config) throws ServletException {
    }

    public void destroy() {
    }

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws ServletException, IOException {
        HttpServletResponse res = (HttpServletResponse) response;
        res.setHeader("Access-Control-Allow-Origin", "*");
        res.setHeader("Access-Control-Allow-Methods", "*");
        res.setHeader("Access-Control-Max-Age", "3600");
        res.setHeader("Access-Control-Allow-Headers", "*");
        res.setHeader("Access-Control-Allow-Credentials", "true");
        chain.doFilter(request, response);
    }
}

2.SpringBoot项目,使用CrossOrigin注解

对于spring boot项目我们只需要在Controller上加上@CrossOrgin注解即可,也可以在需要跨域的接口上加上@CrossOrgin注解

java 复制代码
    @CrossOrigin
    @GetMapping("/test")
    public String test() {
        return "success";
    }

四、示例

我们先开启两个项目,这两个项目使用了不同的端口,在其中一个项目中访问另一个项目的接口,使用如下方法:

此时我们可以在浏览器中发现,在访问此接口的过程中出现了一个报错,并且没有访问到我们需要的那个接口。

当我们使用上述方法之后,再访问另一个项目中的端口,我们可以发现成功跨域了。

相关推荐
未来魔导几秒前
Gin版本的路由总结
开发语言·llm·gin·路由
岭子笑笑8 分钟前
vant 4 之loading组件源码阅读
前端
feathered-feathered10 分钟前
Redis基础知识+RDB+AOF(面试)
java·数据库·redis·分布式·后端·中间件·面试
周杰伦_Jay10 分钟前
【Eino框架】Go语言驱动的LLM应用开发新范式
开发语言·后端·golang
毕设源码-赖学姐12 分钟前
【开题答辩全过程】以 高校排课系统的优化设计与实现为例,包含答辩的问题和答案
java·eclipse
q_191328469512 分钟前
基于SpringBoot2+Vue2的行业知识答题考试系统
java·vue.js·spring boot·mysql·毕业设计·计算机毕业设计·演示文稿
hxmmm12 分钟前
自定义封装 vue多页项目新增项目脚手架
前端·javascript·node.js
ETA812 分钟前
JS执行机制揭秘:你以为的“顺序执行”,其实是V8引擎在背后搞事情!
前端·javascript
上78将12 分钟前
Java中既有编译执行又有解释执行,这个怎么理解?
java·开发语言
鹏北海-RemHusband13 分钟前
微前端实现方式:HTML Entry 与 JS Entry 的区别
前端·javascript·html