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

 更新时间:2017年05月24日 10:28:51   作者:我叫陈小宝T_T  
本篇文章主要介绍了详解VueJs前后端分离跨域问题,详细介绍了在项目内设置代理(proxyTable)的方式来解决跨域问题,有兴趣的可以了解一下

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

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

相关文章

  • Vue中tinymce富文本功能配置详解

    Vue中tinymce富文本功能配置详解

    TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器,跟其他富文本编辑器相比,有着丰富的插件,支持多种语言,能够满足日常的业务需求并且免费,本文小编给大家详细介绍了Vue中tinymce富文本功能配置,需要的朋友可以参考下
    2023-11-11
  • Vuejs 单文件组件实例详解

    Vuejs 单文件组件实例详解

    这篇文章主要介绍了Vuejs 单文件组件实例详解,需要的朋友可以参考下
    2018-02-02
  • vue使用vue-i18n实现国际化的实现代码

    vue使用vue-i18n实现国际化的实现代码

    本篇文章主要介绍了vue使用vue-i18n实现国际化的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • vue+element ui表格添加多个搜索条件筛选功能(前端查询)

    vue+element ui表格添加多个搜索条件筛选功能(前端查询)

    这篇文章主要给大家介绍了关于vue+element ui表格添加多个搜索条件筛选功能的相关资料,最近在使用element-ui的表格组件时,遇到了搜索框功能的实现问题,需要的朋友可以参考下
    2023-08-08
  • vue3.0实现点击切换验证码(组件)及校验

    vue3.0实现点击切换验证码(组件)及校验

    这篇文章主要为大家详细介绍了vue3.0实现点击切换验证码(组件)及校验,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • vue 实现超长文本截取,悬浮框提示

    vue 实现超长文本截取,悬浮框提示

    这篇文章主要介绍了vue 实现超长文本截取,悬浮框提示,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • el-popover如何通过js手动控制弹出框显示、隐藏

    el-popover如何通过js手动控制弹出框显示、隐藏

    最近项目中多次用到了Popover弹出框,下面这篇文章主要给大家介绍了关于el-popover如何通过js手动控制弹出框显示、隐藏的相关资料,需要的朋友可以参考下
    2023-12-12
  • 分析 Vue 中的 computed 和 watch 的区别

    分析 Vue 中的 computed 和 watch 的区别

    这篇文章分析 Vue 的 computed 和 watch 的区别,computed 用来监控自己定义的变量,页面上可直接使用。watch 是监测 Vue 实例上的数据变动,通俗地讲,就是检测 data 内声明的数据,需要的朋友可以参考一下
    2021-09-09
  • 深入理解vue中的slot与slot-scope

    深入理解vue中的slot与slot-scope

    这篇文章主要介绍了vue中的slot与slot-scope的相关知识,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • Vue3 v-bind 指令的基本用法

    Vue3 v-bind 指令的基本用法

    在 Vue 3 中,v-bind 指令用于将表达式的值绑定到 DOM 元素的属性上,这个指令的语法与 Vue 2 相同,但有一些细微的变化和改进,这篇文章主要介绍了Vue3 v-bind 指令的基本用法,需要的朋友可以参考下
    2024-08-08

最新评论