如何解决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前后端分离跨域问题”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！