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

文章目录

• • 1、前言
  • 2、跨域问题
  • 3、后端服务接口
  • 4、接口跨域测试
  • • 4.1 Vue调用测试
    • 4.2 Postman测试
  • 5、服务接口增加注解@CrossOrigin解决跨域

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")
public class AssistantController {

    @GetMapping("/getEngineModel")
    public Result<List<EngineModelVO>> getEngineModel(){
        return ResultUtils.success(engineModelList);
    }
}

4、接口跨域测试

4.1 Vue调用测试

    Vue项目端口为5173，运行后访问localhost:5173服务。
    此处Vue项目中引入了axios组件，直接使用axios调用接口进行测试。

<template>
    <AButton @click="clickWechat"/>
</template>

<script>
import axios from 'axios'

const clickWechat =() => {
    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")
public class AssistantController {

    @GetMapping("/getEngineModel")
    @CrossOrigin(origins = "*")
    public Result<List<EngineModelVO>> getEngineModel(){
        return ResultUtils.success(engineModelList);
    }
}