Vue项目使用代理解决跨域问题，部署到服务器报错We´re sorry but XX doesn´t work properly without JavaScript enabled

常用解决跨域问题的方案

后端配置cors

/**
 * 使用CORS解决跨域问题
 * @author rsw
 */
@Configuration
public class GlobalCorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        //1.添加CORS配置信息
        CorsConfiguration config = new CorsConfiguration();
        //1) *默认所有ip和端口都可以访问，也可以设置固定
        config.addAllowedOrigin("*");
        //2) 是否发送Cookie信息
        config.setAllowCredentials(true);
        //3) 允许的请求方式
        config.addAllowedMethod("OPTIONS");
        config.addAllowedMethod("HEAD");
        config.addAllowedMethod("GET");
        config.addAllowedMethod("PUT");
        config.addAllowedMethod("POST");
        config.addAllowedMethod("DELETE");
        config.addAllowedMethod("PATCH");
        // 4）允许的头信息
        config.addAllowedHeader("*");
        // 5）有效时长
        config.setMaxAge(3600L);
        //2.添加映射路径，我们拦截一切请求
        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config);

        //3.返回新的CorsFilter.
        return new CorsFilter(configSource);
    }
}

前端问题

vue官方提供的解决跨域问题是配置代理。

其实这样配置一般就可以解决前端的跨域问题，但是当时不知道怎么的就在vue.config.js配置了代理，代理配置如下：

module.exports = {
  "transpileDependencies": [
    "vuetify"
  ],
  publicPath: './',  //vue3 解决部署到服务器白屏问题  '/'  =>  ''
  outputDir:'dist',
  devServer: {
    // 项目运行时候的端口号
    host: "127.0.0.1",
    port: 8089,
    proxy: {
      '/api': {
        target: 'http://118.89.143.27:8090',//后台接口
        ws: true, //如果要代理websockets
        secure:false, // 使用的是http协议则设置为false，https协议则设置为true
        changeOrigin: true, //将选项changeOrigin设置true为基于名称的虚拟托管站点。
        pathRewrite: {  //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
          '^/api': '/api'
        }
      }
    }
  },
  //警告 webpack 的性能提示
  configureWebpack : {
    performance: {
      hints:'warning',
      //入口起点的最大体积 整数类型（以字节为单位）
      maxEntrypointSize: 50000000,
      //生成文件的最大体积 整数类型（以字节为单位 300k）
      maxAssetSize: 30000000,
      //只给出 js 文件的性能提示
      assetFilter: function(assetFilename) {
        return assetFilename.endsWith('.js');
      }
    }
  }
};

proxy配置主要是将8089端口代理到8090后端端口

在本地运行没有问题，但是部署到服务器上，访问后端接口状态是200，但是放回数据有问题，显示“”“We're sorry but XX doesn't work properly without JavaScript enabled”

百度了很多关于这个问题的解决方式，主要有两种，一个是修改publicPath，另一种是修改nginx的配置，但是都不起作用。

最后经过各种尝试，才发现是proxy的代理问题

解决

删除proxy的代理配置，并配置axios的默认路径即可解决：

axios.defaults.baseURL = 'http://服务器ip:8090/api';

后端配置跨域，前端其实可以不进行配置也可以。