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