详解VueJs前后端分离跨域问题


Posted in Javascript onMay 24, 2017

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 从if else 到 switch case 再到抽象
Jul 17 Javascript
基于JQuery实现相同内容合并单元格的代码
Jan 12 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
Sep 24 Javascript
jquery中animate的stop()方法作用实例分析
Jan 30 Javascript
JS实现很酷的EMAIL地址添加功能实例
Feb 28 Javascript
Javascript实现飞动广告效果的方法
May 25 Javascript
js代码验证手机号码和电话号码是否合法
Jul 30 Javascript
微信支付如何实现内置浏览器的H5页面支付
Sep 25 Javascript
学习JavaScript设计模式(封装)
Nov 26 Javascript
vue引入ueditor及node后台配置详解
Jan 03 Javascript
vue路由懒加载的实现方法
Mar 12 Javascript
vue组件三大核心概念图文详解
May 30 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 #Javascript
angular directive的简单使用总结
May 24 #Javascript
深入理解JavaScript 参数按值传递
May 24 #Javascript
详解Angular 4.x NgTemplateOutlet
May 24 #Javascript
javascript简单写的判断电话号码实例
May 24 #Javascript
Angular2搜索和重置按钮过场动画
May 24 #Javascript
深入理解react-router@4.0 使用和源码解析
May 23 #Javascript
You might like
解析php中获取系统信息的方法
2013/06/25 PHP
php递归函数中使用return的注意事项
2014/01/17 PHP
PHP共享内存用法实例分析
2016/02/12 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
jquery使用hide方法隐藏指定id的元素
2015/03/30 Javascript
关于javascript中dataset的问题小结
2015/11/16 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
异步加载JS、CSS代码(推荐)
2016/06/15 Javascript
在线引用最新jquery文件的实现方法
2016/08/26 Javascript
JavaScript伪数组用法实例分析
2017/12/22 Javascript
Vue插值、表达式、分隔符、指令知识小结
2018/10/12 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
2018/12/11 Javascript
浅谈javascript错误处理
2019/08/11 Javascript
vue项目使用.env文件配置全局环境变量的方法
2019/10/24 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
2020/04/09 Javascript
Python+Opencv识别两张相似图片
2020/03/23 Python
python urllib爬取百度云连接的实例代码
2017/06/19 Python
python使用scrapy发送post请求的坑
2018/09/04 Python
在Pandas中给多层索引降级的方法
2018/11/16 Python
使用python PIL库实现简单验证码的去噪方法步骤
2019/05/10 Python
python pygame实现球球大作战
2019/11/25 Python
TensorFlow学习之分布式的TensorFlow运行环境
2020/02/05 Python
Python 自由定制表格的实现示例
2020/03/20 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
Python3爬虫mitmproxy的安装步骤
2020/07/29 Python
Pycharm Git 设置方法
2020/09/15 Python
使用CSS3实现圆角,阴影,透明
2014/12/23 HTML / CSS
在C中是否有模拟继承等面向对象程序设计特性的好方法
2012/05/22 面试题
求职简历自荐信
2013/10/20 职场文书
党员自我批评与反省材料
2014/02/10 职场文书
治安消防安全责任书
2014/07/23 职场文书
公司合作意向书范文
2014/07/30 职场文书
商场促销活动策划方案
2014/08/18 职场文书
法院个人总结
2015/03/03 职场文书
2019学校请假条格式及范文
2019/06/25 职场文书
对PyTorch中inplace字段的全面理解
2021/05/22 Python