머리말
프로젝트 개발 시 우리가 사용하는 도메인 이름이 백엔드 인터페이스의 도메인 이름과 일치하지 않기 때문에 도메인 간 문제가 발생하는 경우가 많습니다. 개발 환경에서는 프록시를 구성하여 도메인 간 문제를 해결할 수 있지만 패키징 및 배포 후에는 다른 방법을 사용하여 도메인 간 문제를 해결해야 합니다. 이 기사에서는 vue-cli3를 사용하여 도메인 간 패키징 및 배포하는 방법을 소개합니다.
1. 교차 출처란 무엇입니까?
CORS(교차 출처 리소스 공유)는 웹 페이지가 다른 소스에서 리소스를 가져오는 것을 방지하는 브라우저의 동일 출처 정책의 제한 사항입니다. 동일한 프로토콜, 도메인 이름 및 포트 번호. 원본이 아닌 소스 경로에서 요청이 시작되면 브라우저는 요청을 거부합니다.
2. vue-cli3 패키징의 여러 모드
vue-cli3에서는 패키징이 세 가지 모드로 나뉩니다.
3. 크로스 도메인 솔루션 패키징 및 배포
크로스 도메인을 패키징하고 배포할 때 크로스 도메인 문제를 해결하려면 nginx를 사용하여 역방향 프록시를 수행해야 합니다.
nginx는 Windows, Linux, Mac 등 다양한 운영 체제에서 실행할 수 있는 고성능 웹 서버입니다. 매우 강력하며 역방향 프록시, 로드 밸런싱, 캐싱 등에 사용할 수 있습니다.
Linux 환경에서는 다음 명령을 통해 nigix를 설치할 수 있습니다.
sudo apt-get update sudo apt-get install nginx
nginx를 설치한 후 도메인 간 문제를 해결하려면 nginx를 구성해야 합니다.
먼저, 일반적으로 /etc/nginx/conf.d/default.conf에서 nginx 구성 파일을 찾아야 합니다. 다음 명령을 통해 nginx 구성 파일을 엽니다.
sudo vim /etc/nginx/conf.d/default.conf
그런 다음 다음과 같이 서버 세그먼트를 찾습니다. :
server { listen 80; server_name localhost; #charset koi8-r; #access_log /var/log/nginx/host.access.log main; location / { root /usr/share/nginx/html; index index.html index.htm; } #error_page 404 /404.html; # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; } # proxy the PHP scripts to Apache listening on 127.0.0.1:80 # #location ~ .php$ { # proxy_pass http://127.0.0.1; #} # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 # #location ~ .php$ { # root html; # fastcgi_pass 127.0.0.1:9000; # fastcgi_index index.php; # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; # include fastcgi_params; #} # deny access to .htaccess files, if Apache's document root # concurs with nginx's one # #location ~ /.ht { # deny all; #} }
위치 세그먼트 아래에 역방향 프록시를 구성해야 합니다. 예를 들면 다음과 같습니다.
location /api { proxy_pass http://192.168.0.100:8080; # 后端API地址 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host $http_host; proxy_set_header X-NginX-Proxy true; proxy_http_version 1.1; proxy_connect_timeout 600; proxy_read_timeout 600; proxy_send_timeout 600; proxy_buffer_size 64k; proxy_buffers 4 64k; proxy_busy_buffers_size 128k; proxy_temp_file_write_size 128k; # 解决跨域 add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'Authorization,DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; # 缓存时间，单位秒。这里设置的是6小时 expires 21600s; # 收到304响应后，再次请求的时间间隔 proxy_cache_valid 200 304 12h; }
그중 Proxy_pass 다음의 주소는 백엔드 API 주소로 변경되어야 하며 add_header는 교차 도메인 문제를 해결합니다.
vue-cli3에서는 vue.config.js의 publicPath를 구성하여 패키지 파일을 도메인 이름과 독립적으로 만들 수 있습니다. 구체적인 구성은 다음과 같습니다.
module.exports = { publicPath: '', devServer: { // 设置跨域代理 proxy: { '/api': { target: 'http://192.168.0.100:8080', // 后端API地址 ws: true, changOrigin: true, pathRewrite: { '^/api': '' } } } }, chainWebpack: (config) => { config.optimization.delete('splitChunks'); } }
Among /api는 백엔드 API 주소의 접두사이고 대상 구성은 백엔드 API 주소입니다.
위 구성 후 vue 프로젝트를 패키징하고 배포할 수 있습니다. 패키징이 완료된 후 /dist 디렉터리의 모든 파일을 nginx 구성의 루트 디렉터리(일반적으로 /usr/share/nginx/html)에 복사한 다음 nginx 서비스를 다시 시작합니다.
sudo service nginx restart
이때, 우리는 도메인 전반에 걸쳐 vue-cli3 패키징 및 배포를 구현하는 데 성공했습니다.
요약
이 글에서는 nginx 역방향 프록시를 사용하여 vue-cli3 패키징 및 배포의 도메인 간 문제를 해결하는 방법을 소개합니다. 위의 구성을 통해 크로스 도메인 문제를 해결하고 프로덕션 환경에 배포할 수 있습니다. 물론 nginx에 대한 사용자 액세스 권한 활성화 등 배포 과정에서 보안 문제에 주의해야 합니다. 물론, jsonp, websocket 등과 같은 도메인 간 문제를 해결하기 위해 다른 방법을 사용할 수도 있습니다.
위 내용은 도메인 전반에 걸친 Vue 패키징 및 배포의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
