首页 > 其他分享 >前后端分离开发中的跨域问题

前后端分离开发中的跨域问题

时间:2023-06-07 22:23:42浏览次数:28  
标签:index 分离 跨域 admin 前后 acl login localhost

一、什么是跨域问题?

跨域(CORS)是指不同域名之间相互访问。是指浏览器不能访问其他网站的脚本,它是由浏览器的同源策略造成的,同源策略是浏览器对于JavaScript所定义的安全限制策略。
由于现在在开发中大多数都是前后端分离的项目,所以会导致跨域问题,下面我们先了解跨域再解决跨域问题。
同源策略:是指协议,域名,端口都要相同,其中有一个不同就会产生跨域问题。

二、什么情况下会遇到跨域问题呢?

如果不是同一协议、同一IP地址、同一端口号,这三个条件如果有一个不满足就会产生跨域问题。当协议、IP地址和端口号相同时,就可以访问不同的文件。

举一个例子:

  在前后端分离的项目中,前端是拥有一个访问链接的,假设是http://localhost:9528/;同样的后端也是有的,如http://localhost:8021/,那么就登录功能来讲,前端给出的function是:

export function login(data) {
  return request({
    url: '/admin/acl/index/login',
    method: 'post',
    data
  })
}

  那么,我们后端要做的就是写一个Controller,并且在@PostMapping中将参数写为"/admin/acl/index/login",这样一来便完成了前后端的连接请求访问,但是此时我们会发现我的后端真正在调用的时候其实访问的url是http://localhost:8021/admin/acl/index/login,而不是前端所期望的http://localhost:9528/admin/acl/index/login,产生了不一致,也就是我们所说的跨域问题,下图就是因为跨域问题在前端控制台产生的错误信息:

 

  对于这种情况来讲,我们的http是相同的,localhost都是本地,也是相同的,但是其后面的端口号就不同了,因此就导致了跨域问题。

三、如何解决跨域问题?

这里说一种最简单的解决方式:就是给我们所写的Controller类上加一个注解@CrossOrigin即可解决跨域问题。

如下所示:

@Api(tags = "登录接口")
@RestController
@RequestMapping("/admin/acl/index")
@CrossOrigin // 用于解决跨域问题
public class IndexController {
    /**
     * 请求登录的login
     * @return
     */
    @ApiOperation("登录")
    @PostMapping("login")
    public Result login(){
        Map<String, String> map = new HashMap<>();
        map.put("token", "admin - token");
        return Result.ok(map);
    }

 

标签:index,分离,跨域,admin,前后,acl,login,localhost
From: https://www.cnblogs.com/fxy0715/p/17464704.html

相关文章

  • 四、用JSON作前后端分离的交互
    在SpringReactiveSecurity中,Security过滤器是通过类ServerHttpSecurity配置的,用户认证过滤器是AuthenticationWebFilter,相当于SpringSecurity中的UsernamePasswordAuthenticationFilter。 在AuthenticationWebFilter中,用户名和密码的解析是通过ServerAuthenticationConverte......
  • 如何防范CSRF(跨域请求伪造)?
    1、什么是CSRF?跨域请求伪造指的是第三方诱导用户点击含攻击信息的网站,利用用户在目标网站的凭证冒充用户进行操作。  2、如何解决?方法一:同源检测HTTP请求头Referrer字段是浏览器默认带上,含义是发送请求的页面地址,比如同样是删除相册的操作http://www.photo.com/del?id=......
  • 前后端分离架构下使用 Sa-Token 完成登录认证
    一、架构分析目前绝大多数系统都已经采用“前后端分离”架构来设计了,传统的Session模式鉴权也不再适合这种架构(或者需要额外写很多的代码来专门适配)。Sa-Token是一个java轻量级权限认证框架,专为前后端分离架构打造,主要解决登录认证、权限认证、单点登录、OAuth2、微服务网......
  • Vue 跨域配置
    在package.json同级目录下新建文件vue.config.js;内容如下:module.exports={//自行复制黏贴devServer:{proxy:{'/api':{//以/api开头的地址会被替换成下面的targettarget:'http://191.196.21.1:8080/',//接口真实地址......
  • SpringBoot2.x跨域问题(CrossOrigin失效问题)
    方法一SpringBoot版本的不同,CrossOrigin失效了,正确配置如下:@CrossOrigin(originPatterns="*",allowCredentials="true",maxAge=3600)方法二如果以上方法还是不生效,最后的终极方法可以进行硬编码进行跨域设置:对需要跨域的接口,进行Response对象设置可跨域URL设置(*代表......
  • 前后端架构
    目前主流的开发模式,就两种:前后端分离和前后端不分离前后端不分离这种模式中,前端页面看到的效果都是由后端控制,由后端渲染页面或重定向,也就是后端需要控制前端的展示,前端与后端的耦合度很高。这种应用模式比较适合纯网页应用,但是当后端对接App时,App可能并不需要后端返回一个......
  • Angular 应用解决跨域访问的问题
    在前后台分离的应用中,Angular与Java是一对好搭档。但是如果是分开部署应用,则势必会遇到跨域访问的问题。什么是跨域启动应用之后,有些浏览器会提示如下告警信息:No'Access-Control-Allow-Origin'headerispresentontherequestedresource.Origin'http://localhost:4200'i......
  • 跨域资源共享 CORS
    概述如果需要在前端与不同域的后端进行通信,可以在后端配置CORS,允许指定的域名访问后端资源。开始通过配置合适的响应头,可以明确指定允许的来源域、请求方法和头部信息。Node.jsapp.all('*',function(req,res,next){res.header("Access-Control-Allow-Origin","*");......
  • vue解决跨域方法
    什么是跨域  跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议,端口,域名。只要这个3个中有一个不同就是跨域。这里列举一个经典的列子:#协议跨域http://a.baidu.com访问https://a.baidu.com;#端口跨域http://a.baidu.com:8080访问http://a.baidu.com:80;#域......
  • Nginx的动静分离和平滑升级的操作步骤
    Nginx动静分离和平滑升级拓扑图:推荐步骤:在Centos01上安装Nginx服务,使用www.bdqn.com访问Nginx在Centos02配置DNS服务器使用,创建bdqn.com域和benet.com域分别添加主机指向Nginx主机IP地址和LAMP主机IP地址在Nginx服务器配置动静分离,静态数据图片访问Nginx动态php访问跳转到LAMP在Cen......