Verwenden Sie Nginx in vue.js, um domänenübergreifende Probleme zu lösen

Im Folgenden werde ich einen Artikel über die Verwendung des vue.js-Proxys und die Verwendung von Nginx zur Lösung domänenübergreifender Probleme veröffentlichen. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird.

Verwenden Sie den Nginx-Reverse-Proxy, um domänenübergreifende Probleme zu lösen (vue.js verwendet einen Proxy, um Optionsanforderungen zu entfernen, die von vue.js aufgrund domänenübergreifender Probleme ausgelöst werden)

Für unser Projekt ist weiterhin ein Knoten erforderlich. js als Container

1. Installieren Sie Nginx unter Windows (laden Sie die stabile Version von der offiziellen Website http://nginx.org/en/download.html herunter )

2. Ändern Sie den 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. Die von Ihrem uve.js gepackte dist-Datei ist wie folgt folgt

4. Fügen Sie dann eine Projektstartkonfigurationsdatei server.produktion.js hinzu

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. Verwenden Sie dann den Befehl node server.produktion.js im Projektverzeichnis und drücken Sie die Eingabetaste, um festzustellen, dass dem Paket Abhängigkeiten fehlen. Verwenden Sie npm install [Abhängigkeitskomponente der Fehlermeldung]. Express, Komprimierung, http-Proxy-Middleware usw.

Dann starten Sie das Projekt und greifen auf die Adresse http://localhost:8080/xxx zu

6. vue.js verwendet Proxy Insbesondere: Sie können sich auf Baidu beziehen (ändern Sie einfach inde.js in der Konfigurationsdatei)

 proxyTable: {
     '/api': {
    target: Host.Host,//设置你调用的接口域名和端口号 别忘了加http
    changeOrigin: true,
    pathRewrite: {
     '^/api': '/'//这里理解成用‘/api'代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add'即可
    }
   }
  },

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird .

Verwandte Artikel:

Wie implementiert man das asynchrone Laden von Komponenten in vue+webpack?

Im Zusammenhang mit domänenübergreifenden JSONP-Problemen in Vue-Ressource

So ändern Sie den Unterkomponentenstil über die übergeordnete Komponente in Vue

Das obige ist der detaillierte Inhalt vonVerwenden Sie Nginx in vue.js, um domänenübergreifende Probleme zu lösen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!