前后端分离--vue项目部署到nginx上访问后台出现跨域问题

我的项目前后端分离部署，后台已经配置过cors，但前端访问静态页面没有问题，一旦发请求访问后台服务器时就出现跨域

如何解决，有大佬帮忙吗？

1. 前端访问时：

 

 

2. 前端编译代码

访问路径设置带上'/api'  --axios.defaults.baseURL = '/api'
config/index.js文件中build配置
 build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/formula/',

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }

3. 前端项目部署准备用nginx跨域

配置为：

server {
    listen       8888;
    server_name  localhost;

    root /usr/myapp/nginx/dist;
    # 项目根目录中指向项目首页
    index index.html;

    client_max_body_size 20m;
    client_body_buffer_size 128k;

    # 根请求会指向的页面
    location / {
      # 此处的 @router 实际上是引用下面的转发，否则在 Vue 路由刷新时可能会抛出 404
      try_files $uri $uri/ @router;
      # 请求指向的首页
      index index.html;
    }

    # 由于路由的资源不一定是真实的路径，无法找到具体文件
    # 所以需要将请求重写到 index.html 中，然后交给真正的 Vue 路由处理请求资源
    location @router {
      rewrite ^.*$ /index.html last;
    }

    location /api/ {
          # 后端的真实接口
          rewrite ^/api/(.*) /$1 break;
          proxy_pass http://118.25.187.60:8000/;
          proxy_redirect off;
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header   Cookie $http_cookie;
          # for Ajax
          #fastcgi_param HTTP_X_REQUESTED_WITH $http_x_requested_with;
          proxy_set_header HTTP-X-REQUESTED-WITH $http_x_requested_with;
          proxy_set_header HTTP_X_REQUESTED_WITH $http_x_requested_with;
          proxy_set_header x-requested-with $http_x_requested_with;
          client_max_body_size 10m;
          client_body_buffer_size 128k;
          proxy_connect_timeout 90;
          proxy_send_timeout 90;
          proxy_read_timeout 90;
          proxy_buffer_size 128k;
          proxy_buffers 32 32k;
          proxy_busy_buffers_size 128k;
          proxy_temp_file_write_size 128k;
    }
}
~                                                                                           
4.后台springboot

后台配置好了跨域，后台项目访问路径：http://118.25.187.60:8000/

@Bean
public CorsFilter corsFilter() {
    //1.添加CORS配置信息
    CorsConfiguration config = new CorsConfiguration();
    //1) 允许的域,不要写*，否则cookie就无法使用了
    /*List<String> allowedOrigins = prop.getAllowedOrigins();
    for (String origin : allowedOrigins) {
        config.addAllowedOrigin(origin);
    }*/
    //使用方法引用简化上述代码
    prop.getAllowedOrigins().forEach(config::addAllowedOrigin);
    //2) 是否发送Cookie信息
    config.setAllowCredentials(prop.getAllowCredentials());
    //3) 允许的请求方式
    /*config.addAllowedMethod("OPTIONS");
    config.addAllowedMethod("GET");
    config.addAllowedMethod("PUT");
    config.addAllowedMethod("POST");
    config.addAllowedMethod("DELETE");*/
    //方法引用简化上述代码
    prop.getAllowedMethods().forEach(config::addAllowedMethod);
    // 4）允许的头信息
    prop.getAllowedHeaders().forEach(config::addAllowedHeader);
    // 5) 允许的有效时间
    config.setMaxAge(prop.getMaxAge());

    //2.添加映射路径，我们拦截一切请求
    UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
    configSource.registerCorsConfiguration(prop.getFilterPath(), config);

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

跨域配置

ly:
  cors:
    allowedOrigins:
      - http://118.25.187.60:8000
      - http://118.25.187.60:80
      - http://118.25.187.60:8001
      - http://localhost:8001
      - http://localhost:8000
    allowCredentials: true
    allowedMethods:
      - GET
      - POST
      - DELETE
      - PUT
      - OPTIONS
    maxAge: 3600
    filterPath: /**
    allowedHeaders:
      - "*"

 

nginx配置好了之后，访问后台仍出现跨域问题