0


从Vue到Postman全面验证API接口跨域问题

文章目录

1、前言

最近刚接手了一个新项目,业务还没了解全,让开发功能。做了俩接口,postman自测完能拿到数据就给前端联调了。
 过了十分钟,前端告诉我要解决下跨域问题。我心想,这个服务都运行这么久了,生产环境还有三方产品在调用它,怎么突然存在跨域问题。看了下项目确实没有做跨域配置。
 但是三方产品都在用很久了。带着疑问,还是找方法去测了下接口是否支持跨域。然后再去配置跨域拦截,解决跨域问题。

2、跨域问题

我们都知道跨域是同源策略导致的。域名不同、协议不同、端口号不同任意一种情况都会导致跨域。

域名不同:当前页面的域名为 www.example.com,而请求的资源的域名为 api.example.com。
协议不同:当前页面的协议为 https,而请求的资源的协议为 http。
端口号不同:当前页面的端口号为 8080,而请求的资源的端口号为 9090。

此处测试用端口号不同的场景来测试。
 我的后端服务端口为9090
 发出请求的前端资源端口暂定为5173
 前端请求后端,此时满足端口号不同,根据同源策略会出现跨域。

3、后端服务接口

接口名称:/ai/assistant/getEngineModel
请求类型:GET
服务地址:localhost:9090

@RestController@RequestMapping("/ai/assistant")publicclassAssistantController{@GetMapping("/getEngineModel")publicResult<List<EngineModelVO>>getEngineModel(){returnResultUtils.success(engineModelList);}}

4、接口跨域测试

4.1 Vue调用测试

Vue项目端口为5173,运行后访问localhost:5173服务。
 此处Vue项目中引入了axios组件,直接使用axios调用接口进行测试。
<template><AButton@click="clickWechat"/></template><script>import axios from'axios'constclickWechat=()=>{axios({method:'get',url:'http://localhost:9090/ai/assistant/getEngineModel',withCredentials:true,data:{},}).then(({ data })=>{
      console.log(data)})}</script>
  • 跨域失败截图

在这里插入图片描述
在这里插入图片描述

  • 跨域成功截图

在这里插入图片描述
在这里插入图片描述

4.2 Postman测试

在Postman下新建Collections,然后在项目下新建请求Add request。
 在Headers下新增Origin,维护值为localhost:5173。表示我要从localhost:5173请求localhost:9090的服务。
 点击Send,虽然服务响应Status为200,Response Body 也正常返回接口数据。
 **但是Response Headers中不包含Access-Control-Allow-Origin localhost: 5173,说明当前请求存在跨域问题。**
  • 跨域失败截图 缺少Access-Control-Allow-Origin localhost: 5173在这里插入图片描述
  • 跨域成功截图 包含以下响应内容 Access-Control-Allow-Origin localhost: 5173 Vary: Origin Access-Control-Allow-Credentials: true

在这里插入图片描述

5、服务接口增加注解@CrossOrigin解决跨域

确认项目跨域问题存在,对新增服务接口增加注解 @CrossOrigin 即可。
 扩展说明:跨域问题解决方式很多,不限于当前@CrossOrigin注解、WebMvcConfigurer接口和自定义Filter。
@RestController@RequestMapping("/ai/assistant")publicclassAssistantController{@GetMapping("/getEngineModel")@CrossOrigin(origins ="*")publicResult<List<EngineModelVO>>getEngineModel(){returnResultUtils.success(engineModelList);}}

本文转载自: https://blog.csdn.net/niaonao/article/details/141019217
版权归原作者 niaonao 所有, 如有侵权,请联系我们删除。

“从Vue到Postman全面验证API接口跨域问题”的评论:

还没有评论