1、目的：vue+springboot 开放的同学，使用nginx代理，实现前后台分离部署

2、问题：vue打包后的静态页面和文件直接由nginx代理访问没有问题，但是请求接口时是请求不到的。

3、解决方案：

a)配置nginx:

server {
        listen       80;
        server_name  localhost

        location / {
            root   D:/static; #vue工程打包后的文件路径
            index  index.html;
        }
    location /api{    # 会将接口地址/api开头的全部替换文下边配置的地址
        proxy_pass http://localhost:8081/;            #接口服务地址  配置跨域
    }

       
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

b)vue 打包配置：

配置var baseUrl = '/api';

保证打包后，请求的接口地址以/ws 开头

4、结果：

请求成功。

vue项目打包部署nginx跨域

vue项目连接外部api接口时，打包部署到nginx后出现api404，api跨域问题，这个时候需要给vue项目本身进行跨域，再配置nginx中进行跨域即可解决，详见下文。

1. 首先给vue项目加上跨域【使用外部api时】

在vue项目中index.js文件中加上代理操作。

这里的【target】是我们需要跨域的api路径（接口路径），下面的【"^api"】直接为空。

上图为 我自己添加的【test.env.js】配置文件，主要在测试环境使用，这里直接把 API_HOST 替换为【’"/api"’】,注意是单引号-------双引号。

到此，我们vue项目中的代理就已经做好了。

2. 在nginx.conf中配置代理

在nginx文件夹中有一个conf文件夹，打开后进行编辑nginx.conf配置文件。

进行添加此配置，proxy_pass http://*********；这里需要注意【proxy_pass后面有一个空格】。

注意：如果报【nginx: [emerg] unknown directive “?” in /usr/local/nginx/conf/nginx.conf:2】此错误，请检查nginx.conf的格式是否是UTF-8。

3. 重启nginx

进入 nginx 文件夹中的 sbin 文件中执行【./nginx -s reload】命令即可。

如有其他疑问，可以在下方评论区留言，一起解决。

我的项目前后端分离部署，后台已经配置过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配置好了之后，访问后台仍出现跨域问题