首页 > 其他分享 >记录一次艰难的云服务器部署前后端项目springBoot+mybatis和vue(两天解决的前后端跨域问题多种方式)

记录一次艰难的云服务器部署前后端项目springBoot+mybatis和vue(两天解决的前后端跨域问题多种方式)

时间：2023-04-22 22:00:56浏览次数：53  
标签：Control www vue springBoot 前后 gzip import response fastcgi

前言

大家好 我是歌谣 今天继续给大家带来后端java的学习 最近刚学习完java的一个增删改查 紧接着就是部署项目了

代码准备工作

前端:vue 后端:springboot+mybatis 数据库 mysql

部署后端项目

打包

找到maven-package-run maven build

记录一次艰难的云服务器部署前后端项目springBoot+mybatis和vue(两天解决的前后端跨域问题多种方式)_Access

云服务器上面建立文件

mkdir /www/springBoot创建文件 上传jar包道指定位置

记录一次艰难的云服务器部署前后端项目springBoot+mybatis和vue(两天解决的前后端跨域问题多种方式)_nginx_02

linux命令操作

查看服务

ps -ef|grep java

启动服务

nohup java -jar geyao-0.0.1-SNAPSHOT.jar &

记录一次艰难的云服务器部署前后端项目springBoot+mybatis和vue(两天解决的前后端跨域问题多种方式)_nginx_03

中途

紧接着 漫长的跨域问题就开始了

记录一次艰难的云服务器部署前后端项目springBoot+mybatis和vue(两天解决的前后端跨域问题多种方式)_spring_04

第一天晚上于是开始想解决方案（后端解决）

在此感谢我的大学同学 现称作小李

配置跨域方式1

直接加注解@CrossOrigin

配置跨域方式2

@Component
public class CrossOriginFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        //Ignore Implements
    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        response.setHeader("Access-Control-Allow-Origin","*");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, PATCH, DELETE, OPTIONS");
        response.setHeader  ("Access-Control-Max-Age", "86400");
        response.setHeader("Access-Control-Allow-Headers", "*");
        filterChain.doFilter(servletRequest, servletResponse);
    }

    @Override
    public void destroy() {
        //Ignore Implements
    }
}

结果1（失败）

由于时间太赶 所以失败告终 postman可以请求成功 但是就是前端获取不到数据

第二天继续想解决方案

在此感谢三群的群友 在此称为Mikey

配置跨域方式1

package com.itheima.filter;

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 {
@Bean
public CorsFilter cors(){
CorsConfiguration corsConfiguration = new CorsConfiguration();;
corsConfiguration.addAllowedOrigin("*");
corsConfiguration.addAllowedHeader("*");
corsConfiguration.addAllowedMethod("*");
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**",corsConfiguration);
return new CorsFilter(source);
}
}

结果(失败)

postman可以请求成功 但是就是前端获取不到数据

配置反向代理1

user  www www;
worker_processes 1;
#error_log  /www/wwwlogs/nginx_error.log  crit;
#pid        /www/server/nginx/logs/nginx.pid;
worker_rlimit_nofile 51200;



events
    {
        use epoll;
        worker_connections 51200;
        multi_accept on;
    }

http
    {
        include       mime.types;
		#include luawaf.conf;

		include proxy.conf;

        default_type  application/octet-stream;

        server_names_hash_bucket_size 512;
        client_header_buffer_size 32k;
        large_client_header_buffers 4 32k;
        client_max_body_size 50m;

        sendfile   on;
        tcp_nopush on;

        keepalive_timeout 60;

        tcp_nodelay on;

        fastcgi_connect_timeout 300;
        fastcgi_send_timeout 300;
        fastcgi_read_timeout 300;
        fastcgi_buffer_size 64k;
        fastcgi_buffers 4 64k;
        fastcgi_busy_buffers_size 128k;
        fastcgi_temp_file_write_size 256k;
		fastcgi_intercept_errors on;

        gzip on;
        gzip_min_length  1k;
        gzip_buffers     4 16k;
        gzip_http_version 1.1;
        gzip_comp_level 2;
        gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml;
        gzip_vary on;
        gzip_proxied   expired no-cache no-store private auth;
        gzip_disable   "MSIE [1-6]\.";

        limit_conn_zone $binary_remote_addr zone=perip:10m;
		limit_conn_zone $server_name zone=perserver:10m;

        server_tokens off;
        access_log off;

server
    {
        listen  8083;
        server_name location;
       
        #error_page   404   /404.html;
        include enable-php.conf;

        location /
        {
            root  /www/springBootQ/dist;
            index  index.html index.htm;
        }

        location /api
        {
           proxy_pass http://localhost:8082;
        }

        location ~ /\.
        {
            deny all;
        }

        access_log  /www/wwwlogs/access.log;
    }
include /www/server/panel/vhost/nginx/*.conf;
}

结果(失败)

反反复复配置了很多次 然后服务器的8888端口被占用了 最终把控制面板端口改成了8887 此处也经历了很大的波折 反向代理如何 配置是彻底搞懂了 中午为此我都没有休息 还是没有搞定

docker解决(成功)

Mikey单独行动 直接服务器开了8787端口 8888端口 最后让他告诉我如何部署即可 这边记录了一下完成

【React工作记录九十六】docker部署前后端项目在云服务器

第三天早上

目前已具有环境

docker的前后端环境 本地启动+9528端口也是可以展示前后端 勉强可以用把 本地+代理也是可以使用的

继续琢磨(如何不用代理直接完成)

这个时候小李在此出马

配置跨域环境

package com.itheima.filter;

import jakarta.servlet.FilterChain;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import org.springframework.lang.Nullable;
import org.springframework.stereotype.Component;
import org.springframework.web.filter.OncePerRequestFilter;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;

import java.io.IOException;

@Component
public class CrossOriginFilter extends OncePerRequestFilter {

    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
        response.setHeader("Access-Control-Allow-Origin","*");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "*");
        response.setHeader  ("Access-Control-Max-Age", "86400");
        response.setHeader("Access-Control-Allow-Headers", "*");
        filterChain.doFilter(request, response);
    }
}

最后原因浮现

Credential is not supported if the CORS header 'Access-Control-Allow-Origin' is '*'
CORS 请求是在设置了凭证标志的情况下尝试的，但服务端使用通配符（"*"）配置 Access-Control-Allow-Origin 的值，这样是不允许使用凭证的。

要在客户端改正这个问题，只需要确保发出 CORS 请求时将凭证标志设置为 false。

    如果使用 XMLHttpRequest 发出请求，确保未将 withCredentials 设置为 true。
    如果使用服务器发送事件，确保 EventSource.withCredentials (en-US) 的值为 false（false 为默认值）。
    如果使用 Fetch API，确保 Request.credentials 的值为 "omit"。

如果还不成功，则需要修改服务端的行为，可能需要修改 Access-Control-Allow-Origin 的值，来为客户端所能够加载资源的源予以授权。
1后端解决：
    1-1在后端的过滤器中设置请求头为具体的站点不用通配符，response.setHeader("Access-Control-Allow-Origin", "允许访问的站点");
     1-2(推荐)，在后端的过滤器中设置请求头为自动获取当前请求的站点，response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
2.前端解决
     检查Axsios的配置，把http://Axios.defaults.withCredentials = true注释掉
、

安装最新java包

cd www/springBoot

记录一次艰难的云服务器部署前后端项目springBoot+mybatis和vue(两天解决的前后端跨域问题多种方式)_Access_05

安装最新前端

cd /www/springBootQ/dist替换文件 配置代理

代理配置

user  www www;
worker_processes 1;
#error_log  /www/wwwlogs/nginx_error.log  crit;
#pid        /www/server/nginx/logs/nginx.pid;
worker_rlimit_nofile 51200;



events
    {
        use epoll;
        worker_connections 51200;
        multi_accept on;
    }

http
    {
        include       mime.types;
		#include luawaf.conf;

		include proxy.conf;

        default_type  application/octet-stream;

        server_names_hash_bucket_size 512;
        client_header_buffer_size 32k;
        large_client_header_buffers 4 32k;
        client_max_body_size 50m;

        sendfile   on;
        tcp_nopush on;

        keepalive_timeout 60;

        tcp_nodelay on;

        fastcgi_connect_timeout 300;
        fastcgi_send_timeout 300;
        fastcgi_read_timeout 300;
        fastcgi_buffer_size 64k;
        fastcgi_buffers 4 64k;
        fastcgi_busy_buffers_size 128k;
        fastcgi_temp_file_write_size 256k;
		fastcgi_intercept_errors on;

        gzip on;
        gzip_min_length  1k;
        gzip_buffers     4 16k;
        gzip_http_version 1.1;
        gzip_comp_level 2;
        gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml;
        gzip_vary on;
        gzip_proxied   expired no-cache no-store private auth;
        gzip_disable   "MSIE [1-6]\.";

        limit_conn_zone $binary_remote_addr zone=perip:10m;
		limit_conn_zone $server_name zone=perserver:10m;

        server_tokens off;
        access_log off;

server
    {
        listen  8083;
        server_name location;
       
        #error_page   404   /404.html;
        include enable-php.conf;

        location /
        {
            root  /www/springBootQ/dist;
            index  index.html index.htm;
        }

        location /api
        {
           proxy_pass http://localhost:8082;
        }

        location ~ /\.
        {
            deny all;
        }

        access_log  /www/wwwlogs/access.log;
    }
include /www/server/panel/vhost/nginx/*.conf;
}

结果（成功不用配置代理）

记录一次艰难的云服务器部署前后端项目springBoot+mybatis和vue(两天解决的前后端跨域问题多种方式)_nginx_06

总结

我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注前端小歌谣带你加入前端学习交流群

标签：Control,www,vue,springBoot,前后,gzip,import,response,fastcgi
From： https://blog.51cto.com/u_14476028/6215587

相关文章

  • Vue基础知识
    模板语法文本插值（textinterpolation）最基本的数据绑定形式，使用“Mustache”语法即{{...}}<span>Message:{{msg}}</span>{{}}中的值会被替换为相应组件实例中msg属性的值，且会同步地更新原始HTML<p>Message:<spanv-html="msg"></span></p>这里的v-html被称为指令Attrib......
  • RuoYi-Vue 分离版 收获与总结
    https://blog.csdn.net/qq_41965731/article/details/115241184一、常量的定义以下是阿里编码规约   二、图片的base64编码https://blog.csdn.net/duola8789/article/details/78844431概述博客三、在项目启动时将一些数据提交加载到缓存中1.利用@PostConstruct......
  • Forest-声明式HTTP客户端框架-集成到SpringBoot实现调用第三方restful api并实现接口
    场景Forest声明式HTTP客户端API框架，让Java发送HTTP/HTTPS请求不再难。它比OkHttp和HttpClient更高层，是封装调用第三方restfulapiclient接口的好帮手，是retrofit和feign之外另一个选择。通过在接口上声明注解的方式配置HTTP请求接口。官网:Forest 代码地址:forest:声明式HTTP客户......
  • vue2源码-十二、mixin的使用和原理
    mixin的使用和原理使用：可以通过Vue.mixin来实现逻辑的复用,问题在于数据来源不明确。声明的时候可能对导致命名冲突vue3采用的就是compositionAPI局部混入：varmyMixin={created:function(){this.hello()},methods:{hello:function(){......
  • 使用Maven-shade-plugin打包SpringBoot项目
    使用Maven-shade-plugin打包SpringBoot项目另附参考文章：https://blog.csdn.net/u011441473/article/details/127844885好奇葩的打包之旅，最后在stackoverflow上找到了解决办法，遇到问题，还是多去google吧，国内真不行，百度质量太低，一件很小的事，花了我1个多小时。。下面说一下我遇到......
  • Springboot 多实例负载均衡部署
    Springboot多实例负载均衡部署一、测试代码：控制层测试代码：importjava.net.Inet4Address;importjava.net.InetAddress;importjava.net.UnknownHostException;@Controller@RequestMapping("/test")publicclassTestController{@GetMapping("")@Resp......
  • SpringBoot+Mybatis这个bug估计连作为神仙的您也无法解决--》Invalid bound statement
    最近开发一个调查单的应用系统，加班加点为了解决几个bug，但是最近两天卡在一个bug上。作为一头牛，不能轻易放弃，向困难挑战是牛的精神。1、Invalidbound问题展示首先，我针对题型QuestionType功能,写了五个子功能:增加题型，删除题型，修改题型，查询单条题型，模糊查询多条记录；还写了问题、调查......
  • SpringBoot文件上传
    application.yml配置spring:#文件上传配置servlet:multipart:max-file-size:10MBmax-request-size:10MBweb:resources:static-locations:/upload/代码packagecom.haoyang.Controller;importorg.springframework.web.bind.a......
  • SpringBoot+Mybatis-Plus+EasyExcel
    首先建立一个springboot项目，导入依赖<!--MyBatisPlus依赖--><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.4.2</version......
  • vue-admin-template 如何添加快捷导航（标签导航栏）
    前言关于快捷导航(标签栏导航)在文档中确实有介绍，但是看完是一头雾水，不知道如何修改，不过文档最后给了一个移除的大致操作，从这里可以找到入手点前期准备vue-admin-template项目代码vue-element-admin项目代码操作流程注：以下操作流程是按照自行摸索的操作顺序来写的，因此......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99