如何解決VueJs前后端分離跨域問題

這篇文章給大家分享的是有關如何解決VueJs前后端分離跨域問題的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

使用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;
  #  }
  #}
}

感謝各位的閱讀！關于“如何解決VueJs前后端分離跨域問題”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！