国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

詳解VueJs前后端分離跨域問題

2019-11-19 16:30:37
字體:
來源:轉載
供稿:網友

使用vue-cli搭建的vue項目

可以使用在項目內設置代理(proxyTable)的方式來解決跨域問題

設置配置項的目錄在config下的index.js,主要通過配置proxyTable項,設置代理指向你的后臺地址

dev: {  env: require('./dev.env'),  port: 8085,  autoOpenBrowser: true,  assetsSubDirectory: 'static',  assetsPublicPath: '/',  proxyTable: {   '/agent': {    target: 'http://127.0.0.1:7105/',    changeOrigin: true,    pathRewrite: {     '^/agent': ''    }   }  },  // CSS Sourcemaps off by default because relative paths are "buggy"  // with this option, according to the CSS-Loader README  // (https://github.com/webpack/css-loader#sourcemaps)  // In our experience, they generally work as expected,  // just be aware of this issue when enabling this option.  cssSourceMap: false }

前端使用vue-resource來發起請求時

//在main.js中設置公用的地址Vue.prototype.rootUrl = '/agent/';//在具體page中發起請求的方式that.$http.post(this.rootUrl + 'login', parms).then(function (response) {     // 響應成功回調     console.log(response);    }, function (response) {     // 響應錯誤回調    });

其他方式搭建的前端項目,通過使用nginx啟動前端服務同時配置代理

下列是我的nginx配置文件,不管是通過什么方式搭建的前端項目,構建成功后都會輸出一個dist文件,我們只需要將nginx服務目錄指向你的dist文件下你項目的入口文件即可

我的文件目錄是 root D:/openplatform/portal/webapp/dist; 更改此條配置到你的目錄 我入口文件名稱是index.html 使用的是vue-cli打包的項目,參考vue-cli npm run build的dist目錄,指向那個目錄下

#user nobody;worker_processes 4;#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" "$gzip_ratio" $request_time $bytes_sent $request_length';  log_format main '[$time_iso8601] [$remote_addr] [$request] [$http_user_agent] [$cookie_customerID_cookie_flag] [$args]';  access_log logs/access.log main;  sendfile    on;  #tcp_nopush   on;  #keepalive_timeout 0;  keepalive_timeout 65;  gzip on;  gzip_min_length 1k;  gzip_buffers 4 16k;  gzip_http_version 1.0;  gzip_comp_level 3;  gzip_proxied any;  gzip_types *;  server {    listen     80;    root D:/openplatform/portal/webapp/dist;    index index.html;    location / {       try_files $uri $uri/ @router;       index index.html;      }  location @router {       rewrite ^.*$ /index.html last;    }  location ^~/agent/ {      proxy_pass  http://127.0.0.1:7105/;      proxy_redirect  http://127.0.0.1:7105/ /;      proxy_set_header Host $host;      proxy_set_header X-Real-IP $remote_addr;      proxy_set_header REMOTE-HOST $remote_addr;      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;      proxy_connect_timeout 600s;      proxy_read_timeout 600s;      proxy_send_timeout 600s;    }  }  # 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;  #  }  #}}

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 绥棱县| 喀什市| 马尔康县| 浦县| 竹山县| 庆元县| 上栗县| 内黄县| 长沙市| 桦甸市| 乐陵市| 湛江市| 巴中市| 贵南县| 奉节县| 永福县| 兰考县| 彰化县| 临汾市| 麻阳| 米脂县| 肃宁县| 兰坪| 灵武市| 舒兰市| 浮梁县| 巍山| 婺源县| 兴和县| 南宁市| 鹤壁市| 崇左市| 泸溪县| 喀什市| 都匀市| 民乐县| 水城县| 巴彦淖尔市| 宁陵县| 佛学| 格尔木市|