Vue+SpringBoot+Shiro 크로스 도 메 인 문제 해결

모두 가 처음에 하면 이 문제 에 부 딪 힐 것 이 라 고 믿 습 니 다.인터넷 에서 많이 찾 아 도 소 용이 없고 다 쓰 지 못 했 습 니 다.
여기에 기록 해 주세요.여러분 께 도움 이 되 셨 으 면 좋 겠 습 니 다.
1.Vue 전단 설정
config 아래 index.js 에 프 록 시 정 보 를 설정 합 니 다.
주의:이곳 의 크로스 도 메 인 설정 은 개발 환경 에서 만 유효 합 니 다.포장 배치 후 이 크로스 도 메 인 은 역할 을 하지 않 습 니 다.본인 도 이곳 에 오래 걸 렸 습 니 다.Vue 전단 을 포장 한 후에 nginx 에 배치 하 는 것 이 좋 습 니 다.nginx 로 크로스 도 메 인 문 제 를 직접 해결 할 수 있 습 니 다.
1.크로스 도 메 인 설정 개발

proxyTable: {
'/api': {
target: 'http://xxxx.com', //  
changeOrigin: true,
pathRewrite: {
'^/api': ''
  },
 }
},

main.js 에 Ajax 프 록 시 요청 설정

var axios = require('axios')
axios.defaults.baseURL = '/api' //  

그 다음 에 우리 가 요청 방법 을 쓸 때 방법 앞 에'/api'를 붙 이 는 것 입 니 다.이것 은 당신 의 설정 이름 에 따라 어 울 리 는 이름 을 쓰 는 것 입 니 다.

이렇게 해서 저희 전단 Vue 개발 크로스 도 메 인 설정 이 끝 났 습 니 다.
2.생산 크로스 도 메 인 설정
일단 코드 설정 을 볼 게 요.
인터넷 에서 대량의 글 자 료 를 보 았 는데 이것 을 수정 하고 저것 을 수정 하 는 것 이 라 고 하 는데 사실은 이와 같다.................................................
사실 저 희 는 config 아래 index.js 에 프 록 시 정 보 를 설정 해 야 합 니 다.

proxyTable: {
'/api/*': {
target: 'http://  ', //        http
changeOrigin: true,
pathRewrite: {
'^/api': '/api'
  },
 }
},

위 에서 우 리 는 로 컬 크로스 도 메 인 을 설정 할 때 axios 기본 요청 경 로 를 설정 하 였 으 며,생산 포장 은 설정 할 필요 가 없습니다.

 이렇게 하면 우리 코드 는 여기에 설정 되 어 있 습 니 다.다른 것 은 움 직 이지 마 세 요.그리고 npm run build 를 포장 하면 됩 니 다.
남 은 일 은 nginx 에 맡 기 면 됩 니 다.저 는 windows 서비스 에 배 치 된 nginx 입 니 다.이 설치 절 차 는 인터넷 에 많이 있 습 니 다.여 기 는 말 하지 않 겠 습 니 다.
우 리 는 nginx 를 설치 한 후에 약간의 설정 이 필요 하 다.
1.nginx 아래 html 디 렉 터 리 의 내용 삭제
2.우리 Vue 가 만 든 가방 dist 를 nginx 의 html 디 렉 터 리 에 복사 합 니 다.
3.nginx 아래 config 디 렉 터 리 아래 nginx.conf 를 설정 합 니 다.설정 내용 은 다음 과 같 습 니 다.

여기 서 설명 합 니 다.nginx 가 사용 하 는 파일 디 렉 터 리 이름 을 바 꾸 십시오.저희 가 직접 설치 한 디 렉 터 리 는 모두 nginx-1.xx 입 니 다.이런 디 렉 터 리 입 니 다.위 그림 의 루트 경 로 를 설정 할 때/n 에 컴 파일 문제 가 있 을 수 있 습 니 다.저 는 ProNginx 로 바 꾸 었 습 니 다.여러분 이 좋아 하 는 이름 으로 바 꿀 수 있 습 니 다.
이것 은 제 nginx 의 모든 설정 입 니 다.

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

server {
        listen       80;
        server_name        /IP;
        root   D:/HWKJ/ProNginx/ProNginx/html/dist/;
        
        location / {
            index index.php index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
            location /api/ {
            #rewrite  ^.+api/?(.*)$ /$1 break;
            #include  uwsgi_params;
            proxy_pass http://xxx  xxxx/api/;
            #   springboot     ip   
        }
    }
}

설정 이 끝 난 후에 우 리 는 nginx 를 시작 합 니 다.다음은 nginx 의 일부 조작 명령 입 니 다.

start nginx  //  
nginx -s stop // stop     nginx，          
nginx -s quit // quit        nginx，       
nginx -s reload //        ，                
nginx -s reopen //         
nginx -v //   Nginx  

이렇게 해서 저희 전단 Vue 생산 크로스 도 메 인 설정 이 끝 났 습 니 다.
다음은 spring boot 배경 을 설정 합 니 다.
2.spring boot 설정
spring boot 만 있다 면 메 시 지 를 설정 하면 됩 니 다.

import org.springframework.boot.SpringBootConfiguration;
import org.springframework.boot.web.servlet.FilterRegistrationBean;
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;
import org.springframework.web.servlet.config.annotation.*;


/**
 */
@Configuration
public class MyWebConfigurer implements WebMvcConfigurer {

@Override
   public void addCorsMappings(CorsRegistry registry) {
       registry.addMapping("/**") //          
               .allowCredentials(true)  //     cookie
               .allowedOriginPatterns("*")   //         
               .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE") //       
               .allowedHeaders("*")  //       
               .maxAge(168000) ;    //       

   }  
}

만약 당신 의 spring boot 배경 에 shiro 가 통합 되 어 있다 면,위의 설정 은 shiro 에 대한 요청 이 적용 되 지 않 을 것 입 니 다.브 라 우 저 는 크로스 도 메 인 을 알려 줄 것 입 니 다.따라서 다음 방법 으로 크로스 도 메 인 접근 을 허용 합 니 다.

import org.springframework.boot.SpringBootConfiguration;
import org.springframework.boot.web.servlet.FilterRegistrationBean;
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;
import org.springframework.web.servlet.config.annotation.*;


/**
 
 */
@Configuration
public class MyWebConfigurer implements WebMvcConfigurer {
    @Bean
    public FilterRegistrationBean corsFilter() {
        final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        final CorsConfiguration config = new CorsConfiguration();
        //   cookies  
        config.setAllowCredentials(true);
        // #            URI，*      ， SpringMVC ，    *，            Origin
        config.addAllowedOriginPattern("*");
        // #        ,*    
        config.addAllowedHeader("*");
        //          （ ），        ，               
        config.setMaxAge(18000L);
        //          ，*      
        config.addAllowedMethod("OPTIONS");
        config.addAllowedMethod("HEAD");
        config.addAllowedMethod("GET");
        config.addAllowedMethod("PUT");
        config.addAllowedMethod("POST");
        config.addAllowedMethod("DELETE");
        config.addAllowedMethod("PATCH");
        source.registerCorsConfiguration("/**", config);

        FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
        //          
        bean.setOrder(0);

        return bean;
    }
}

Vue+SpringBoot+Shiro 크로스 도 메 인 문제 해결 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Vue SpringBoot Shiro 크로스 도 메 인 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!