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

相关推荐
小旋风012345 分钟前
封装可拖动弹窗(vue jquery引入到html的版本)
vue.js·html·jquery
gongzemin38 分钟前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
麦麦大数据1 小时前
neo4j+django+deepseek知识图谱学习系统对接前后端分离前端vue
vue.js·django·知识图谱·neo4j·deepseek·在线学习系统
三翼鸟数字化技术团队3 小时前
Vue自定义指令最佳实践教程
前端·vue.js
Spark2383 小时前
关于vue3整合tiptap的slash菜单的ts支持
vue.js
随笔记3 小时前
Flex布局下,label标签设置宽度依旧对不齐,完美解决(flex-shrink属性)
javascript·css·vue.js
樊小肆3 小时前
实战!从 0 到 1 搭建 H5 AI 对话页面
前端·vue.js
JiangJiang4 小时前
揭秘Vue3源码之computed:懒计算与缓存机制全解析
前端·vue.js·面试
清灵xmf4 小时前
Vue 3 自定义权限指令 v-action
前端·javascript·vue.js·自定义指令
web_Hsir4 小时前
Uniapp 实现微信小程序滑动面板功能详解
vue.js·微信小程序·uni-app