前后端分离项目跨域问题及解决方案

目录

 

1、什么是跨域

2、前后端分离项目中的跨域问题

3、方法一：SpringBoot后端进行处理

4、方法二：在Vue前端进行处理

5、总结

---

1、什么是跨域

请求同域资源：

在域名 （或 ip 地址）相同，端口号相同下的请求资源，可以看做是同域资源

请求跨域资源：

请求的资源只要 是 域名（或 ip 地址）、端口号中任意一个不同的资源都可以认为是跨域资源

如：

端口号不同

127.0.0.1:80 与 127.0.0.1:8888  属于跨域

域名 (或 ip 地址) 不同

127.0.0.1:80 与 www.baidu.com:80  属于跨域

 

2、前后端分离项目中的跨域问题

例如：

前端 vue项目： 127.0.0.1:70

后端 SpringBoot项目： 127.0.0.1:8888

我们在前端 vue 项目中存放页面，页面中的数据是通过 axios 发起异步请求从 后端 SpringBoot项目中获取的

因此当我们访问前端页面时候， 我们可以理解为所在的当前所在 127.0.0.1:70 域上，所以访问这个127.0.0.1:70 域 的资源都是OK的，但如果使用 js 的方法访问其他域的资源时 就会出现跨域问题

本次教程拿 验证码 举例：

浏览器输入 127.0.0.1:70 访问登录资源，在 login.vue 中的 created 方法中调用 获取验证码方法 ( 发起axios 请求 127.0.0.1:8888 )

此时就会出现跨域的问题

 

3、方法一：SpringBoot后端进行处理

在 每个 Controller 类上加入 @CrossOrigin 注解

或者

在 Controller的基类中加上 @CrossOrigin 注解然后其他 Controller 类就有了这个 @Controller

此时跨域访问就不会报错了。

 

login.vue 访问的后端地址:

 

4、方法二：在Vue前端进行处理

浏览器 在同一个页面访问不同的域 是存在跨域问题的

但 服务器之间的访问是 没有跨域问题

因此 需要在前端设置代理， 通过代理访问 SpringBoot后端API

 

4.1 安装代理

cnpm install --save-dev http-proxy-middleware

4.2 配置请求 baseURL

在 src / utils / request.js 中

// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  // baseURL: 'http://127.0.0.1:8888/ruoyi',
  baseURL: '/api',
  // changeOrigin: true,
  // 超时
  timeout: 10000
})

4.3 配置 proxy

在 vue.config.js 中

module.exports = {
  devServer: {
    // 自动打开浏览器
    open: true,
    port: 70,
    proxy: {
      // // detail: https://cli.vuejs.org/config/#devserver-proxy
      '/api': {
        target: `http://localhost:8888/ruoyi`,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

4.4 login.vue 页面发送验证码的请求

请求 API

import request from '@/utils/request'
// 获取验证码
export function getCodeImg() {
  return request({
    url: '/captcha/captchaImage?type=math',
    method: 'get'
  })
}

请求的截图:

我们发现 请求验证码的地址是前端服务器的地址

http://localhost:70/api/captcha/captchaImage?type=math

但我们配置了 proxy

5、总结

跨域解决方案有很多种，如

• 使用 nginx代理
• 使用 filter 添加头信息
• 使用 @CrossOrigin 注解
• 使用 proxy 代理

 

@CrossOrigin 注解解决方案的优缺点:

优点 :

• 使用起来简单，直接在Controller类上加 @CrossOrigin 注解即可

缺点:

• 如果后端技术使用的不是 SpringBoot，后端代码还需要处理跨域问题
• 浏览器直接访问 后端API，在某种程度上是不太安全的

proxy 解决跨域问题优缺点

优点：

• 在浏览器中屏蔽了实际访问后端的 地址，相对安全
• 后端代码不必要进行额外处理跨域

缺点：

• 在浏览器中看不到后端访问的地址，开发阶段调试不太方便