详解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 相关文章推荐
jQuery学习笔记[1] jQuery中的DOM操作
Dec 03 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
Jul 04 Javascript
js中的setInterval和setTimeout使用实例
May 09 Javascript
优化RequireJS项目的相关技巧总结
Jul 01 Javascript
AngularJs Injecting Services Into Controllers详解
Sep 02 Javascript
javascript实现动态显示颜色块的报表效果
Apr 10 Javascript
史上最全JavaScript常用的简写技巧(推荐)
Aug 17 Javascript
webpack之devtool详解
Feb 10 Javascript
JavaScript学习笔记之DOM基础操作实例小结
Jan 09 Javascript
vue-cli3中vue.config.js配置教程详解
May 29 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
Nov 12 Javascript
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
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桌面中心(二) 数据库写入
2007/03/11 PHP
PHP filter_var() 函数 Filter 函数
2012/04/25 PHP
smarty模板数学运算示例
2016/12/11 PHP
laravel清除视图缓存的代码
2019/10/23 PHP
js简单实现HTML标签Select联动带跳转
2013/10/23 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
2015/05/08 Javascript
简介JavaScript中toUpperCase()方法的使用
2015/06/06 Javascript
Jquery时间轴特效(三种不同类型)
2015/11/02 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
2016/05/13 Javascript
Bootstrap零基础入门教程(二)
2016/07/18 Javascript
javascript笔记之匿名函数和闭包
2017/02/06 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
2017/12/14 Javascript
使用async-validator编写Form组件的方法
2018/01/10 Javascript
angularjs 获取默认选中的单选按钮的value方法
2018/02/28 Javascript
微信小程序实现左滑动删除效果
2020/03/30 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
2020/07/19 Javascript
在vue-cli3中使用axios获取本地json操作
2020/07/30 Javascript
前端vue+elementUI如何实现记住密码功能
2020/09/20 Javascript
详解JavaScript执行模型
2020/11/16 Javascript
jquery实现鼠标悬浮弹出气泡提示框
2020/12/23 jQuery
javascript实现随机抽奖功能
2020/12/30 Javascript
[45:18]完美世界DOTA2联赛循环赛 PXG vs IO 第二场 11.06
2020/11/09 DOTA
Python中MySQLdb和torndb模块对MySQL的断连问题处理
2015/11/09 Python
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
5个很好的Python面试题问题答案及分析
2018/01/19 Python
对matplotlib改变colorbar位置和方向的方法详解
2018/12/13 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
python在OpenCV里实现投影变换效果
2019/08/30 Python
通过实例了解Python异常处理机制底层实现
2020/07/23 Python
Origins悦木之源英国官网:雅诗兰黛集团高端植物护肤品牌
2017/11/06 全球购物
仪器仪表检测毕业生自荐信
2013/10/31 职场文书
后勤人员岗位职责
2013/12/17 职场文书
视光学毕业生自荐书范文
2014/02/13 职场文书
垂直极限观后感
2015/06/08 职场文书
springboot 自定义配置 解决Boolean属性不生效
2022/03/18 Java/Android
windows server 2016 域环境搭建的方法步骤(图文)
2022/06/25 Servers