Vue2:通过代理服务器解决跨域问题

一、场景描述

现在的项目大多数是前后端分离的。Vue前端项目通过ajax去请求后端接口的时候,会有同源策略的限制。从而产生跨域问题。

二、基本概念

1、什么是同源策略?

就是前端服务和后端服务的协议名,IP或主机名,端口号不完全一致。

比如,前端服务开在:http://127.0.0.1:8080

后端接口开在:http://127.0.0.1:5000

此时,前端代码中,用ajax请求后端接口,就会产生跨域问题。

2、解决跨域问题的方式

cors方式

cors本质是,后端服务器,在返回请求的时候,携带了一些特殊的响应头,从而,让浏览器忽略跨域问题

这种解决办法,造成的问题是,任何人都可以访问服务器接口拿数据,所以,要在服务器端设置IP白名单配合使用。

springboot项目实现cors
springboot增加配置类,进行全局配置,来实现全局跨域请求

配置如下:

java 复制代码
@Configuration
public class CorsConfig {

    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        
        /*
        下面三个方法见名知意,可以按需添加,如果不确定自己的需求,全部加上即可
        */
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        
        return corsConfiguration;
    }
    
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig());
        return new CorsFilter(source);
    }

接口上增加注解@CrossOrigin

java 复制代码
@CrossOrigin
@Controller
@RequestMapping("/Pay")

jsonp方式

只能解决get请求的跨域问题。所以,用的很少。且需要前后端人员共同配合来解决跨域问题

代理服务器方式


ajax请求接口,会有同源策略的限制,从而出现跨域问题。

后端服务器之间互相访问,不用ajax,所以,没有同源策略的限制。

三、使用vue-cli实现代理服务器

实现1

vue.config.js

javascript 复制代码
module.exports = {
    pages: {
        index: {
            // page 的入口
            entry: 'src/main.js'
        }
    },
  lintOnSave:false,
    //开启代理服务器
    devServer: {
        proxy: 'http://localhost:5000'
    }
}

axios请求的地址改成代理服务器的地址即可:

javascript 复制代码
axios.get('http://localhost:8080/students')


注意 :这种方式,当请求资源路径在项目的public文件夹中本来就有的时候,就不会请求服务器接口。

比如,public里面有个students文件时,这时候,http://localhost:8080/students获取到的就是这个public目录中的students文件里面的内容。

实现2(更实用)

vue.config.js

javascript 复制代码
module.exports = {
  pages: {
    index: {
      //入口
      entry: 'src/main.js',
    },
  },
	lintOnSave:false, //关闭语法检查
	//开启代理服务器(方式二)
	devServer: {
    proxy: {
      '/test': {
        target: 'http://localhost:5000',
		pathRewrite:{'^/test':''},
        // ws: true, //用于支持websocket		默认true
        // changeOrigin: true //用于控制请求头中的host值		默认true
      },
      '/demo': {
        target: 'http://localhost:5001',
		pathRewrite:{'^/demo':''},
        // ws: true, //用于支持websocket		默认true
        // changeOrigin: true //用于控制请求头中的host值		默认true
      }
    }
  }
}

参数说明:

javascript 复制代码
   changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000
   changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:8080
   changeOrigin默认值为true

axios请求的地址改成代理服务器的地址即可:

javascript 复制代码
axios.get('http://localhost:8080/test/students')

这个方式,就可以解决方式1中,资源同名导致的问题。

官网:https://cli.vuejs.org/zh/config/#devserver-proxy

相关推荐
wangpq1 小时前
微信小程序地图callout气泡图标在ios显示,在安卓机不显示
前端·vue.js
某哈压力大1 小时前
制作一个简单的水印组件
前端·vue.js
应该算是高级了吧1 小时前
问问你:vue3中ref和reactive的底层实现逻辑一样吗?
前端·vue.js
计算机-秋大田2 小时前
基于Spring Boot的轻型卡车零部件销售平台的设计与实现(LW+源码+讲解)
java·vue.js·spring boot·后端·课程设计
大叔_爱编程3 小时前
wx203基于ssm+vue+uniapp的教学辅助小程序
vue.js·小程序·uni-app·毕业设计·ssm·源码·课程设计
MaCa .BaKa3 小时前
25-智慧旅游系统(协同算法)三端
java·javascript·vue.js·spring boot·tomcat·maven·旅游
kiss strong4 小时前
Spring Boot向Vue发送消息通过WebSocket实现通信
vue.js·spring boot·websocket
猫猫不是喵喵.12 小时前
vue 路由
前端·javascript·vue.js
bin915313 小时前
DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)之添加行拖拽排序功能示例12,TableView16_12 拖拽动画示例
前端·javascript·vue.js·ecmascript·deepseek
拉不动的猪13 小时前
vue自定义“权限控制”指令
前端·javascript·vue.js