vue.js 는 도 메 인 문 제 를 해결 하기 위해 에이전트 와 Nginx 를 사용 합 니 다.

Nginx 역방향 프 록 시 를 사용 하여 크로스 도 메 인 문 제 를 해결 합 니 다(vue.js 프 록 시 를 사용 하여 vue.js 가 크로스 도 메 인 으로 인해 발생 하 는 options 요청 을 제거 합 니 다)
우리 프로젝트 는 node.js 를 용기 로 해 야 합 니 다.
1.Windows 에 Nginx 설치(홈 페이지 다운로드 안정 판http://nginx.org/en/download.html)
2.config 의 nginx.conf 파일 을 수정 하 는 server

server { 
listen 8899;//      
server_name localhost; 
root C:/ZOBSF_F/dist;//           
#charset koi8-r; 
#access_log logs/host.access.log main; 
#    api         API   
location ^~/api { 
proxy_pass http://119.23.227.141:10001/;//    IP    
} 
#      ，    404 
location / { 
try_files $uri $uri/ @router; 
index index.html; 
} 
location @router { 
rewrite ^.*$ /index.html last; 
} 
#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 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; 
#} 
}

3.당신 의 uve.js 가 포장 한 dist 파일 은 다음 과 같 습 니 다.

4.그리고 프로젝트 시작 프로필 server.production.js 를 추가 합 니 다.

var express = require('express');
var app = express();
var compression = require('compression');
var proxyMiddleware = require('http-proxy-middleware')
var history = require('connect-history-api-fallback');
app.use(compression());
app.use(express.static(__dirname));
app.middleware = [//    api
    proxyMiddleware(['/api'], {target: 'http://192.168.11.103:10001',
    changeOrigin: true,
    pathRewrite: {
    '^/api' : '/', 
  },}),
];
app.get('*', function(req, res) {
  res.sendFile(__dirname + '/index.html');
});
app.use(history());
app.use(app.middleware);

app.listen('8080', function(error) {
  console.info("==================       ...=============================");
 if (error) {
  console.error(error)
 } else {
  console.info("==================9999      ！！！=============================")
 }
});

5.그리고 프로젝트 디 렉 터 리 에서 명령 node server.production.js 리 턴 을 사용 하면 가방 에 의존 이 부족 한 것 을 발견 하고 npm install[오류 알림 의존 구성 요소]를 사용 하면 각각 express,copression,http-proxy-middleware 등 이 있 습 니 다.
그리고 프로젝트 를 시작 하면 됩 니 다.주소 에 접근 하 세 요.http://localhost8080/xxx
6.vue.js 는 프 록 시 를 사용 하여 바 이 두 를 구체 적 으로 사용 할 수 있 습 니 다.(config 설정 파일 의 inde.js 에서 수정 하면 됩 니 다)

 proxyTable: {
     '/api': {
    target: Host.Host,//                   http
    changeOrigin: true,
    pathRewrite: {
     '^/api': '/'//      ‘/api'  target     ，              api         'http://40.00.100.100:3002/user/add'，   ‘/api/user/add'  
    }
   }
  },

이상 의 vue.js 는 에이전트 와 Nginx 를 사용 하여 도 메 인 을 뛰 어 넘 는 문 제 를 해결 하 는 것 이 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.여러분 께 참고 가 되 고 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.