跨域
為什么會(huì)產(chǎn)生跨域
因?yàn)闉g覽器的同源政策，就會(huì)產(chǎn)生跨域。比如說(shuō)發(fā)送的異步請(qǐng)求是不同的兩個(gè)源，就比如是不同的的兩個(gè)端口或者不同的兩個(gè)協(xié)議或者不同的域名。由于瀏覽器為了安全考慮，就會(huì)產(chǎn)生一個(gè)同源政策，不是同一個(gè)地方出來(lái)的是不允許進(jìn)行交互的。
怎么解決跨域
解決跨域的方法：
第一種jsonp的方法。（面試的時(shí)候各位大哥大姐千萬(wàn)不要先說(shuō)jsonp）
第二種使用CORS解決跨域問(wèn)題，即跨域資源共享，在后端設(shè)置響應(yīng)頭部，加一句代碼：access-control-allow-origin:"*"或者允許交互的域名。
第三種 vue react angular 使用本地開(kāi)發(fā)者服務(wù)器代理跨域。devserver的proxy解決，新建vue.config.js（必須必須必須必須必須必須 在項(xiàng)目的根路徑下）文件，修改propyTable中的target的值，就可實(shí)現(xiàn)用前端解決跨域。(打包上線后就廢了)
測(cè)試接口：中國(guó)天氣網(wǎng)-專業(yè)天氣預(yù)報(bào)、氣象服務(wù)門(mén)戶
proxy:{
? ? ? "/api（可以隨便寫(xiě)）":{
? ? ? ? ? ? target:"請(qǐng)求地址",
? ? ? ? ? ? changeOrigin:true,
? ? ? ? ? ? "pathRewrite":{
? ? ? ? ? ? ? "^/api（和上面一樣）":"/"
? ? ? ? ? ? }
? ? ? }
? },實(shí)現(xiàn)流程vue
1.在項(xiàng)目的根路徑下創(chuàng)建vue.config.js
2.在這個(gè)文件中寫(xiě)入
module.exports={
? ?devServer:{
? ? ? ?open:true,//自動(dòng)開(kāi)啟瀏覽器
? ? ? ?port:8888, //修改端口
? ? ? ?proxy:{
? ? ? ? ? ?"/api":{
? ? ? ? ? ? ? ? target:"http://www.weather.com.cn",
? ? ? ? ? ? ? ? changeOrigin:true,
? ? ? ? ? ? ? ? "pathRewrite":{
? ? ? ? ? ? ? ? ? "^/api":"/"
? ? ? ? ? ? ? ? }
? ? ? ? ? }
? ? ? },
? }
}
3.修改里面的參數(shù)地址 并且 把你的/api 替換組件中的請(qǐng)求地址
4.重啟項(xiàng)目
第四種，使用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 localhost;
?
? ? ? #charset koi8-r;
?
? ? ? #access_log logs/host.access.log main;
?
? ? ? location / {
? ? ? ? ? root ? dist;
? ? ? ? ? index index.html index.htm;
? ? ? }
? ? ? #設(shè)置反向代理跨域
? ? ? #設(shè)置反向代理跨域
? ? ? #設(shè)置反向代理跨域
? ? ? #設(shè)置反向代理跨域
? ? ? #設(shè)置反向代理跨域
? ? ? #設(shè)置反向代理跨域
? ? ? #設(shè)置反向代理跨域
? ? ? #設(shè)置反向代理跨域
? ? ? location /api {
? ? ? #設(shè)置代理需要重寫(xiě)/api
因?yàn)樵陂_(kāi)發(fā)的時(shí)候所有的接口都是以/api開(kāi)頭的，所以在請(qǐng)求代理的時(shí)候和proxyTable一樣的邏輯，需要rewrite重寫(xiě)。
? ? ? ? ? rewrite ^.+api/?(.*)$ /$1 break;
? ? ? ? ? proxy_pass http://www.weather.com.cn;
? ? ? }
? ? ? #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;
? ? ? #}
? }
?
?
? # another virtual host using mix of IP-, name-, and port-based configuration
? #
? #server {
? # ? listen ? ? ? 8000;
? # ? listen ? ? ? somename:8080;
? # ? server_name somename alias another.alias;
?
? # ? location / {
? # ? ? ? root ? html;
? # ? ? ? index index.html index.htm;
? # ? }
? #}
?
?
? # HTTPS server
? #
? #server {
? # ? listen ? ? ? 443 ssl;
? # ? server_name localhost;
?
? # ? ssl_certificate ? ? cert.pem;
? # ? ssl_certificate_key cert.key;
?
? # ? ssl_session_cache ? shared:SSL:1m;
? # ? ssl_session_timeout 5m;
?
? # ? ssl_ciphers HIGH:!aNULL:!MD5;
? # ? ssl_prefer_server_ciphers on;
?
? # ? location / {
? # ? ? ? root ? html;
? # ? ? ? index index.html index.htm;
? # ? }
? #}
?
}
?
?
?
server {
? ? ? listen ? ? ? 9999; # 監(jiān)聽(tīng)端口
? ? ? server_name localhost; # 域名可以有多個(gè)，用空格隔開(kāi)
?
? ? ? #charset koi8-r;
?
? ? ? #access_log logs/host.access.log main;
?
? ? ? location / {
? ? ? ? ? root ? C:\工作\project\client_admin_system\dist; ? ? #站點(diǎn)根目錄，即網(wǎng)頁(yè)文件存放的根目錄, 默認(rèn)主頁(yè)目錄在nginx安裝目錄的html子目錄。
? ? ? ? ? index index.html index.htm; ? #目錄內(nèi)的默認(rèn)打開(kāi)文件,如果沒(méi)有匹配到index.html,則搜索index.htm,依次類推
? ? ? }
?
? ? ? #ssl配置省略
? ? ? ? location /api {
? ? ? ? ? rewrite ^.+api/?(.*)$ /$1 break;
? ? ? ? ? proxy_pass http://192.168.1.100:7001; ? #node api server 即需要代理的IP地址
? ? ? ? ? proxy_redirect off;
? ? ? ? ? proxy_set_header Host $host;
? ? ? ? ? proxy_set_header X-Real-IP $remote_addr;
? ? ? ? ? proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
? ? ? ? }
?
? ? ? #error_page 404 ? ? ? ? ? ? /404.html; ? #對(duì)錯(cuò)誤頁(yè)面404.html 做了定向配置
?
? ? ? # redirect server error pages to the static page /50x.html
? ? ? #將服務(wù)器錯(cuò)誤頁(yè)面重定向到靜態(tài)頁(yè)面/50x.html
? ? ? #
? ? ? error_page ? 500 502 503 504 /50x.html;
? ? ? location = /50x.html {
? ? ? ? ? root ? html;
? ? ? }
? }
第五種，使用otherWindow.postMessage 是html5引入的API,postMessage()方法允許來(lái)自不同源的腳本采用異步方式進(jìn)行有效的通信,可以實(shí)現(xiàn)跨文本文檔,多窗口,跨域消息傳遞.多用于窗口間數(shù)據(jù)通信,這也使它成為跨域通信的一種有效的解決方案.
項(xiàng)目打包
vue項(xiàng)目中大家在運(yùn)行的時(shí)候我們是需要用內(nèi)置的devServer幫助我們自動(dòng)項(xiàng)目 開(kāi)發(fā)過(guò)程中沒(méi)有問(wèn)題
但是 我們所寫(xiě)的項(xiàng)目今后是需要上公網(wǎng)讓用戶訪問(wèn)的 所以我們需要把項(xiàng)目放在性能更好的服務(wù)器上運(yùn)行
還有就是 我們所寫(xiě)的是.vue文件 瀏覽器不認(rèn)識(shí) 沒(méi)有辦法直接解析
所以我們就緒要對(duì)當(dāng)前項(xiàng)目 進(jìn)行打包 就是把項(xiàng)目編譯成 html css js 方便我們把項(xiàng)目放到服務(wù)器上也方便瀏覽器解析
打包流程
1.npm run build命令打包 但是會(huì)發(fā)現(xiàn)打包之后資源路徑有問(wèn)題
2.修改靜態(tài)資源路徑 publicPath
module.exports={
? // 注意位置
? // 注意位置
? // 注意位置
? // 注意位置
? // 注意位置
? publicPath:"./",
?
? devServer:{
? ? ? open:true,//自動(dòng)開(kāi)啟瀏覽器
? ? ? port:8888, //修改端口
? ? ? proxy:{
? ? ? ? ? "/api":{
? ? ? ? ? ? ? ? target:"http://www.weather.com.cn",
? ? ? ? ? ? ? ? changeOrigin:true,
? ? ? ? ? ? ? ? "pathRewrite":{
? ? ? ? ? ? ? ? ? "^/api":"/"
? ? ? ? ? ? ? ? }
? ? ? ? ? }
? ? ? },
? }
}
3.修改路由模式為hash
服務(wù)器上線流程
服務(wù)器購(gòu)買(mǎi)與連接
在購(gòu)買(mǎi)ECS服務(wù)器后，系統(tǒng)會(huì)創(chuàng)建一個(gè)ECS實(shí)例。每一個(gè)ECS實(shí)例對(duì)應(yīng)一臺(tái)已購(gòu)買(mǎi)的云服務(wù)器。您可以通過(guò)電腦上自帶的終端工具訪問(wèn)云服務(wù)器，進(jìn)行應(yīng)用部署和環(huán)境搭建。
-
在ECS實(shí)例列表頁(yè)面，選擇實(shí)例的所屬地域。
-
找到目標(biāo)實(shí)例，然后在操作列選擇【更多】> 【密碼/密鑰】 > 【重置實(shí)例密碼】，然后在彈出的對(duì)話框設(shè)置ECS實(shí)例的登錄密碼
-
在彈出的頁(yè)面，單擊【立即重啟】使新密碼生效。
-
在ECS實(shí)例列表頁(yè)面，復(fù)制ECS實(shí)例的公網(wǎng)IP地址。
-
連接遠(yuǎn)程桌面
（1）方式1 瀏覽器直接訪問(wèn)
即可連接
（2）遠(yuǎn)程桌面方式
在電腦的開(kāi)始中搜索遠(yuǎn)程桌面
nginx服務(wù)器
Nginx是一個(gè)http服務(wù)器。是一個(gè)高性能的http服務(wù)器及反向代理服務(wù)器。官方測(cè)試nginx能夠支支撐5萬(wàn)并發(fā)鏈接，并且cpu、內(nèi)存等資源消耗卻非常低，運(yùn)行非常穩(wěn)定。
代理服務(wù)器
代理服務(wù)器，客戶機(jī)在發(fā)送請(qǐng)求時(shí)，不會(huì)直接發(fā)送給目的主機(jī)，而是先發(fā)送給代理服務(wù)器，代理服務(wù)接受客戶機(jī)請(qǐng)求之后，再向主機(jī)發(fā)出，并接收目的主機(jī)返回的數(shù)據(jù)，存放在代理服務(wù)器的硬盤(pán)中，再發(fā)送給客戶機(jī)。
注意
我們學(xué)習(xí)的vue的跨域 是基于腳手架內(nèi)置服務(wù)器的 但是我們打包之后這個(gè)服務(wù)器就不幫助我們啟動(dòng)服務(wù)了 所以我們之前配置的跨域設(shè)置就作廢了
使用
1.解壓出nginx得到如下內(nèi)容
2.打開(kāi)conf文件夾 復(fù)制一份nginx.conf文件 并且修改名字（名字隨便起） 這個(gè)文件就是nginx的配置文件
3.打開(kāi)Powershell cd到當(dāng)前nginx路徑下 輸入 ./nginx.exe -c ./conf/你復(fù)制的文件名.conf 啟動(dòng)
4.打開(kāi)瀏覽器輸入localhost:80即可啟動(dòng)
使用小擴(kuò)展
記得如果修改服務(wù)器內(nèi)容了 要停止之后在重新啟動(dòng)
打開(kāi)Powershell cd到當(dāng)前nginx路徑下 輸入 ./nginx.exe -c ./conf/你復(fù)制的文件名.conf -s stop 停止
運(yùn)行我們打包項(xiàng)目
1.把我們打包好的dist放到根路徑下
2.修改我們的.conf文件
3.配置端口
4.在電腦瀏覽器嘗試使用 你的公網(wǎng)ip加端口訪問(wèn)文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-836095.html
如不行 重新啟動(dòng)（不要忘了先關(guān)閉nginx） 運(yùn)行瀏覽器即可看見(jiàn)文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-836095.html
到了這里，關(guān)于上線服務(wù)器流程用法及說(shuō)明的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
