位置: IT常识 - 正文

前后端分离项目,如何解决跨域问题?(前后端分离项目部署到服务器)

编辑:rootadmin
前后端分离项目,如何解决跨域问题?

推荐整理分享前后端分离项目,如何解决跨域问题?(前后端分离项目部署到服务器),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:前后端分离项目如何部署,nginx负载均衡前后端分离项目,springboot前后端分离项目,idea怎么运行前后端分离项目,nginx负载均衡前后端分离项目,docker部署前后端分离项目,idea怎么运行前后端分离项目,前后端分离项目如何部署,内容如对您有帮助,希望把文章链接给更多的朋友!

跨域问题是前后端分离项目中非常常见的一个问题,举例来说,编程猫(codingmore)学习网站的前端服务跑在 8080 端口下,后端服务跑在 9002 端口下,那么前端在请求后端接口的时候就会出现跨域问题。

403 Forbidden 是HTTP协议中的一个状态码(Status Code),意味着后端服务虽然成功解析了请求,但前端却没有访问该资源的权限。

那怎么解决这个问题呢?通常有两个思路:

前端使用 Nodejs 代理(开发环境下,生产环境下可以用 Nginx 替代)或者后端开启跨域资源共享一、关于跨域

跨域对于前后端开发者来说,就像一块狗皮膏药,无论是面试还是开发中,都会经常遇到。

之所以出现跨域问题,是因为浏览器的同源策略,为了隔离潜在的恶意文件,为了防御来自歪门邪道的攻击,浏览器限制了从同一个源加载的文档或脚本与来自另一个源的资源进行交互。

前面我们提到了,前端跑在 8080 端口下,后端跑在 9002 端口下,这种情况就属于不同的源(域名不同,协议不同,端口不同),所以 8080 端口下的前端请求直接访问 9002 端口下的后端接口时就访问失败了。

那正确的打开方式是什么呢?我们前面也提到了,前端使用 Nodejs 代理或者后端开启跨域资源共享,我们一一来实践下。

二、Nodejs 代理

在 Nodejs 出现之前,JavaScript 编写的程序通常需要在用户的浏览器上执行,Node.js 出现后,JavaScript 也能用于服务端编程了。Nodejs 一系列的内置模块使得程序可以脱离 IIS、Apache 这种 Web 服务作为独立的服务器执行。

我们使用 Nodejs 来解决跨域问题的思路就是,在本地创建一个虚拟服务器,对 8080 端口下的前端请求进行代理,同时接收 9002 端口下的服务器端响应,这样服务端和服务端进行数据的交互就不会出现跨域问题了。

第一步,配置 Nodejs 代理服务

module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api': { target: 'http://localhost:9002', // 你请求的第三方接口 changeOrigin: false, // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题 pathRewrite: { // 路径重写, '^/api': '' // 替换target中的请求地址,也就是说以后你在请求http://api.codingmore.top/v2/XXXXX这个地址的时候直接写成/api即可。 } }, },}

第二步,配置前端访问请求路径

module.exports = merge(prodEnv, { NODE_ENV: '"development"', VUE_APP_BASE_API: '"/api"' // VUE_APP_BASE_API: '"http://localhost:9002"'})

第三步,重启前端服务

再次点击「登录」按钮,可以看到请求的 URL 发生了改变,原来是 http://localhost:9002/users/login,现在是 http://localhost:8080/api/users/login。与此同时,可以看到多了一个 Remote Address,端口也是 8080,也就是说经过 Nodejs 的代理,前后端的交互在同一个源下面了,这样就不会发生跨域问题了。

同时,可以看得到,服务器端返回的状态码变成了 200,表示请求成功。

三、开启跨域资源共享

跨域资源共享,也就是 Cross-Origin Resource Sharing,简拼为 CORS,是一种基于 HTTP 头信息的机制,通过允许服务器标识除了它自己以外的资源,从而实现跨域访问。

第一步,开启 CORS 支持

在 Spring Boot 应用中,加入 CORS 的支持简单到不忍直视,添加一个配置类就可以了。

@Configurationpublic class GlobalCorsConfig { @Bean public CorsFilter corsFilter() { CorsConfiguration config = new CorsConfiguration(); // 设置你要允许的网站域名 config.addAllowedOrigin("http://localhost:8080"); //允许跨域发送cookie config.setAllowCredentials(true); //放行全部原始头信息 config.addAllowedHeader("*"); //允许所有请求方法跨域调用 config.addAllowedMethod("*"); UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration("/**", config); return new CorsFilter(source); }}

第二步,重启后端服务,再次点击登录按钮,发现请求已经可以正常访问了。

本例中,后端返回 Access-Control-Allow-Origin: http://localhost:8080 就表示,跑在 9002 端口下的后端接口可以被 8080 端口的前端请求访问。

前后端分离项目,如何解决跨域问题?(前后端分离项目部署到服务器)

如果允许所有域名进行跨域调用的话,只需改变一行代码即可。

//允许所有域名进行跨域调用config.addAllowedOriginPattern("*");// 设置你要允许的网站域名// config.addAllowedOrigin("http://localhost:8080");

对于 login 这种简单的请求来说,它们是不会触发 CORS 预检的,因此不需要在服务器端增加其他配置就可以了。那什么是简单请求呢?

1)请求方法是以下三种方法之一:

HEADGETPOST

2)HTTP 的头信息不超出以下几种字段:

AcceptAccept-LanguageContent-LanguageLast-Event-IDContent-Type:只限于三个值 application/x-www-form-urlencoded、multipart/form-data、text/plain

那对于会触发 CORS 预检的非简单请求(比如说请求方法是 PUT 或 DELETE,或者 Content-Type 字段的类型是 application/json,或者请求消息头包含了一些自定义的字段),该怎么办呢?

非简单请求在正式通信之前,会增加一次 HTTP 查询请求,称为“预检”请求。预检请求通过后,才会返回正常的响应内容。

拿编程猫的文章管理页来举例,该页面会向后端发起一个 posts/queryPageable 的分页查询,该请求包含了一个自定义的消息头 Authorization,于是浏览器认为该请求是一个非简单请求,然后就会自动发起一次 OPTIONS 请求,但由于我们的 Spring Boot 项目整合了 SpringsScurity 安全管理框架,没有对OPTIONS请求放开登录认证,导致验证失败,文章分页请求的响应数据就没有返回回来。

第三步,通过以下代码给 OPTIONS 请求放行。

public class SecurityConfig extends WebSecurityConfigurerAdapter { @Override protected void configure(HttpSecurity httpSecurity) throws Exception { ExpressionUrlAuthorizationConfigurer<HttpSecurity>.ExpressionInterceptUrlRegistry registry = httpSecurity .authorizeRequests(); //允许跨域请求的OPTIONS请求 registry.antMatchers(HttpMethod.OPTIONS) .permitAll(); }}

再次重启后端服务,重新访问文章列表接口,发现有响应数据了。

非简单请求必须首先使用 OPTIONS 请求方法发起一个预检请求到服务器端,以获知服务器是否允许该实际请求。"预检请求“的使用,避免了跨域请求对服务器的用户数据造成未预期的影响。

我们来通过两张图片简单总结一下预检请求的整个过程,第一张,发起 OPTIONS 预检请求:

第二章,发起正式请求:

四、源码路径

编程猫后端源码:

https://github.com/itwanger/coding-more

编程猫后台管理的前端源码:

https://github.com/itwanger/codingmore-admin-web

参考链接:

跨域:https://segmentfault.com/a/1190000015597029 CORS:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS 阮一峰:https://www.ruanyifeng.com/blog/2016/04/cors.html 简单请求+预检请求:https://github.com/amandakelake/blog/issues/62

本篇已收录至 GitHub 上星标 1.6k+ star 的开源专栏《Java 程序员进阶之路》,据说每一个优秀的 Java 程序员都喜欢她,风趣幽默、通俗易懂。内容包括 Java 基础、Java 并发编程、Java 虚拟机、Java 企业级开发、Java 面试等核心知识点。学 Java,就认准 Java 程序员进阶之路😄。

https://github.com/itwanger/toBeBetterJavaer

star 了这个仓库就等于你拥有了成为了一名优秀 Java 工程师的潜力。也可以戳下面的链接跳转到《Java 程序员进阶之路》的官网网址,开始愉快的学习之旅吧。

https://tobebetterjavaer.com/

没有什么使我停留——除了目的,纵然岸旁有玫瑰、有绿荫、有宁静的港湾,我是不系之舟。

本文链接地址:https://www.jiuchutong.com/zhishi/300334.html 转载请保留说明!

上一篇:最全面试题CSS(含答案)(css面试题及答案)

下一篇:《推荐PlumGPT:一款优秀的聊天机器人》(《推荐一个好地方》图书馆)

  • 华为nova5i有灭屏功能吗(华为nova5i灭屏显示怎么设置)

    华为nova5i有灭屏功能吗(华为nova5i灭屏显示怎么设置)

  • 华为荣耀9x上有没有人脸识别(华为荣耀9x有红外功能吗)

    华为荣耀9x上有没有人脸识别(华为荣耀9x有红外功能吗)

  • 抖音粉丝是不是关注我的人(抖音粉丝是不是关注了就成粉丝了)

    抖音粉丝是不是关注我的人(抖音粉丝是不是关注了就成粉丝了)

  • 携号转网余额怎么办(携号转网余额怎么退)

    携号转网余额怎么办(携号转网余额怎么退)

  • 支付宝限制7天怎么弄(支付宝限制7天后,还能恢复吗)

    支付宝限制7天怎么弄(支付宝限制7天后,还能恢复吗)

  • 小度本地端口分配失败是什么意思(小度的另外的一个接口有什么用)

    小度本地端口分配失败是什么意思(小度的另外的一个接口有什么用)

  • 360浏览器白屏是怎么回事(360浏览览器白屏)

    360浏览器白屏是怎么回事(360浏览览器白屏)

  • 华为手机耗电快怎么解决(华为手机耗电快一招解决)

    华为手机耗电快怎么解决(华为手机耗电快一招解决)

  • 易班用户名和密码是什么(易班账号的初始密码)

    易班用户名和密码是什么(易班账号的初始密码)

  • 商品下架了还能退款吗(商品下架了还能评价吗)

    商品下架了还能退款吗(商品下架了还能评价吗)

  • cortana是哪个公司的语音助手(cortana的作用)

    cortana是哪个公司的语音助手(cortana的作用)

  • 苹果11怎么看内存还有多少(苹果11怎么看内存占用)

    苹果11怎么看内存还有多少(苹果11怎么看内存占用)

  • 512kbps能正常看视频吗(512kbps多快)

    512kbps能正常看视频吗(512kbps多快)

  • 荣耀v30pro防水吗(荣耀v30 pro有防水功能吗)

    荣耀v30pro防水吗(荣耀v30 pro有防水功能吗)

  • 淘宝怎么提高心级呢(淘宝怎么提高心情等级)

    淘宝怎么提高心级呢(淘宝怎么提高心情等级)

  • 芒果tv会员手机和电视可以同时登录吗(芒果tv会员手机端可以几个人用)

    芒果tv会员手机和电视可以同时登录吗(芒果tv会员手机端可以几个人用)

  • 苹果8手机是几k屏幕的(苹果8手机是几寸屏幕)

    苹果8手机是几k屏幕的(苹果8手机是几寸屏幕)

  • realme后盖是什么材质(realmex手机后盖材质)

    realme后盖是什么材质(realmex手机后盖材质)

  • 苹果飞行模式旁边是什么标志(苹果手机飞行模式后面这个标志)

    苹果飞行模式旁边是什么标志(苹果手机飞行模式后面这个标志)

  • 手机怎么把动图变小(手机怎么把动图变高清)

    手机怎么把动图变小(手机怎么把动图变高清)

  • 企业微信收费吗(公司使用企业微信收费吗)

    企业微信收费吗(公司使用企业微信收费吗)

  • iphonexr进水了怎么办(iphonexr进水了开不了机)

    iphonexr进水了怎么办(iphonexr进水了开不了机)

  • Win11小组件打不开怎么办?Win11小组件打不开的解决方法(win11小组件加载内容出现错误)

    Win11小组件打不开怎么办?Win11小组件打不开的解决方法(win11小组件加载内容出现错误)

  • vue数据更新了,但是页面不渲染的问题(vue数据更新会触发什么生命周期)

    vue数据更新了,但是页面不渲染的问题(vue数据更新会触发什么生命周期)

  • 用 rollup + gulp 造个轮子,别说还挺香(用pullout造句)

    用 rollup + gulp 造个轮子,别说还挺香(用pullout造句)

  • python round()函数是什么(Pythonround函数作用)

    python round()函数是什么(Pythonround函数作用)

  • 车船使用税会打折么
  • 固定资产盘点折旧怎么算
  • 个体户每月开票超3万
  • 销货清单和送货单的区别
  • 民间非营利机构加班费记什么科目
  • 有限公司能否申请破产
  • 减免的附加税怎么做会计分录
  • 什么情况下用资本公积科目
  • 以个人名义开的发票
  • 应取得未取得发票
  • 原材料供销合同和电子汇划收款回单金额不一样
  • 盘盈存货会计处理会计分录
  • 没收到发票可以做成本吗
  • 外资企业股权转让所得税率
  • 商品流通企业的资金循环
  • 企业增值税不可以跨月交吗
  • 纳税总额包括
  • 日用品专用发票可以抵税嘛
  • 扣收手续费
  • 往来科目明细表
  • 企业汽油费会计分录
  • 现金短缺属于出纳员负责如何做会计处理
  • 验车费计入什么科目
  • 什么企业需要纳税申报
  • 代开专票交的城建税怎么申报附加税
  • 处置固定资产损失的账务处理
  • 股权激励取消怎么处理?
  • 土地使用权对外出租还摊销吗
  • 苹果电脑重装系统无法连接服务器
  • 存在弃置费用的固定资产,如果履行弃置义务
  • 去掉右键菜单中的快捷键
  • 财务原始凭证
  • 收到别的公司对公转账往来
  • 在php中,字符串有哪些表示形式
  • 结转出租包装物报废的残料价值计入
  • 转售股票会计分录
  • 年末一般纳税人税率表
  • 应付债券的会计分录有哪些
  • php正则表达式匹配链接
  • 智能优化算法书籍推荐
  • 作用域和作用域链的理解
  • 加班补贴费
  • 矿产资源补偿费计入税金及附加吗
  • 上市公司净资产转正的方法
  • 多收了钱怎么记账
  • mysql主要支持哪些数据类型?
  • 餐饮公司分店营销方案
  • 过渡期怎么坚持下去
  • 商誉必须减值吗
  • 采购原材料未入库
  • 企业所得税交完了转个人
  • 利得和损失计入所有者权益的情况
  • 关于利润分配科目的表述正确的有
  • 企业营业利润率怎么算
  • 发票可以冲销几次
  • 会议服务公司名称大全
  • 什么是记账凭证?有哪些分类
  • ubuntu 管理软件
  • msi安装错误代码2503
  • vista下实现秘密下载的解决办法
  • java调用so库文件
  • 重装windows764 位后后如何将apache mysql加入系统服务
  • win8怎么设置自动开机
  • QQExternal.exe是什么进程?QQExternal.exe进程为什么被运行?
  • windows7如何启动记事本
  • rtmanager.exe - rtmanager是什么进程 有什么用
  • Metaio in Unity3d 教程--- 一. 搭建环境,运行官方案例
  • ie浏览器登录多个账号
  • android动态添加fragment
  • android注册界面设计
  • python操作微信自动发消息
  • Emeditor与dos(cmd)经典使用技巧之批量生成网页
  • shell函数库
  • shell 批量删除
  • javascript 性能
  • jquery 跨域方法
  • 如何查询以前月份发票超限量的申请
  • 深圳市税务局好考吗
  • 河南省国家税务局发票查询官网
  • 新余契税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设