spring+vue项目打包部署到后端，解决跨域问题

最新推荐文章于 2024-08-13 20:38:59 发布

又起风了

最新推荐文章于 2024-08-13 20:38:59 发布

阅读量2.1k

点赞数

分类专栏： VUE springboot Java

本文链接：https://blog.csdn.net/pan_xi_yi/article/details/100043653

版权

Java 同时被 3 个专栏收录

40 篇文章 0 订阅

订阅专栏

springboot

10 篇文章 0 订阅

订阅专栏

VUE

8 篇文章 0 订阅

订阅专栏

问题描述

环境描述
后端使用springboot+jpa，后端访问端口 8089；前端使用vue开发，前端访问端口8080。
具体问题
在开发时，前端配置了跨域请求服务，并且前端类似于部署到了服务器上（和webpack相关），所以能够直接访问后端。但是部署到tomcat服务器上就是完全静态的css+js+html了，这时候访问使用微服务启动的项目就导致了跨域问题，因为端口不一致。

问题解决

在xxxApplication.java同级建立CrosConfig.java.内容如下，即可解决跨域访问。

package com.ktvme.bigdata;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1允许任何域名使用
        corsConfiguration.addAllowedHeader("*"); // 2允许任何头
        corsConfiguration.addAllowedMethod("*"); // 3允许任何方法（post、get等）
        return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig()); // 4
        return new CorsFilter(source);
    }
}

注意事项

vue前端配置的ip访问地址是直接对axios指定访问的地址。
本地开发时的代理配置config/index.js文件中配置

  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        //target: 'http://192.168.97.36:8088',//后端接口地址
        target: 'http://localhost:8089',
        changeOrigin: true,//是否允许跨越
        pathRewrite: {
            '^/api': '/siteSelection',//重写,
        }
      }
    },

但是在部署到tomcat上这个是无效的。

部署之前修改 http-service.js，指定访问端口和访问地址。

axios.defaults.baseURL = 'http://192.168.97.216:8089/siteSelection'; //填写域名  /aip

我之前是/api，部署到项目后访问地址就变成了http://192.168.97.216:8080/api/xxxController
因为放在了tomcat下。直接/api就是到根目录下找api文件夹。

其中不要使用localhost代替ip。

跨域取数据测试代码

对于是否可以跨域取到数据可以使用以下的jquery代码.修改访问地址和参数、请求类型即可。

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    $(function(){
        $.ajax({
            url:"http://192.168.97.74:8089/data/sq_city",
            data:{"province":"北京市"},
            dataType: "json", // 表示返回类型
            type:"POST",   // 请求方式
            //crossDomain:true,  //是否跨域  可后端设置
            //contentType:"application/json;charset=UTF-8", 
            contentType: "application/x-www-form-urlencoded",
            success:function(data){
                console.log(data);
            }
        });
    });
</script>