vue打包使用Nginx代理解决跨域问题


Posted in Javascript onAugust 27, 2018

vue 在开发环境,涉及跨域,就在本地配置了代理,但是部署到服务器上,就不行了。

解决方法有一下几种

  • 服务器端配置CORS
  • 用nginx反向代理,和访问本地服务器是一样的
  • 可以修改成正式线上的地址,再build

推荐

使用nginx配置反向代理,这样就可以在前端彻底解决跨域问题。

vue index.js文件源码

'use strict'
// Template version: 1.2.7
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
changeOrigin: true,
proxyTable: {
'/api': {
target: 'https://api.it120.cc/fengyu',
changeOrigin:true,
pathRewrite: {
'^/api': ''
}
},
'/book': {
target: 'http://api.zhuishushenqi.com/',
changeOrigin:true,
pathRewrite: {
'^/book': ''
}
},
},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: 'eval-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
// 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,
},
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: './static',
assetsPublicPath: './',
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}

Nginx 配置文件源码

# power by www.php.cn
#user nobody;
worker_processes 1;
#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"';
  #access_log logs/access.log main;
  sendfile    on;
  #tcp_nopush   on;
  #keepalive_timeout 0;
  keepalive_timeout 65;
  #tcp_nodelay on;
 fastcgi_connect_timeout 300;
 fastcgi_send_timeout 300;
 fastcgi_read_timeout 300;
 fastcgi_buffer_size 128k;
 fastcgi_buffers 4 128k;
 fastcgi_busy_buffers_size 256k;
 fastcgi_temp_file_write_size 256k;
 #gzip on;
 gzip on;
 gzip_min_length 1k;
 gzip_buffers   4 32k;
 gzip_http_version 1.1;
 gzip_comp_level 2;
 gzip_types    text/plain application/x-javascript text/css application/xml;
 gzip_vary on;
 gzip_disable "MSIE [1-6].";
 server_names_hash_bucket_size 128;
 client_max_body_size   100m; 
 client_header_buffer_size 256k;
 large_client_header_buffers 4 256k;
  server {
    listen    80;
    server_name localhost;
    #charset koi8-r;
    #access_log logs/host.access.log main;
    root  "E:/phpStudy/PHPTutorial/WWW";
    location / {
      index index.html index.htm index.php l.php;
      autoindex off;
    }
    #error_page 404       /404.html;
    # redirect server error pages to the static page /50x.html
    #
    error_page  500 502 503 504 /50x.html;
    location = /50x.html {
      root  html;
    }
    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #  proxy_pass  http://127.0.0.1;
    #}
    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    location ~ \.php(.*)$ {
      fastcgi_pass  127.0.0.1:9000;
      fastcgi_index index.php;
      fastcgi_split_path_info ^((?U).+\.php)(/?.+)$;
      fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
      fastcgi_param PATH_INFO $fastcgi_path_info;
      fastcgi_param PATH_TRANSLATED $document_root$fastcgi_path_info;
      include    fastcgi_params;
    }
    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #  deny all;
    #}
location /api {
proxy_pass https://api.it120.cc/fengyu;
} 
  }
  # 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;
  #  server_name localhost;
  #  ssl         on;
  #  ssl_certificate   cert.pem;
  #  ssl_certificate_key cert.key;
  #  ssl_session_timeout 5m;
  #  ssl_protocols SSLv2 SSLv3 TLSv1;
  #  ssl_ciphers HIGH:!aNULL:!MD5;
  #  ssl_prefer_server_ciphers  on;
  #  location / {
  #    root  html;
  #    index index.html index.htm;
  #  }
  #}
include vhosts.conf;
}

成功截图

vue打包使用Nginx代理解决跨域问题

vue打包使用Nginx代理解决跨域问题

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

Javascript 相关文章推荐
JavaScript+CSS控制打印格式示例介绍
Jan 07 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 Javascript
JS根据生日算年龄的方法
May 05 Javascript
js实时获取并显示当前时间的方法
Jul 31 Javascript
JavaScript学习笔记整理_setTimeout的应用
Sep 19 Javascript
Javascript使用SWFUpload进行多文件上传
Nov 16 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
May 03 Javascript
JS函数节流和函数防抖问题分析
Dec 18 Javascript
详解微信小程序调起键盘性能优化
Jul 24 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
Sep 15 Javascript
vue项目配置使用flow类型检查的步骤
Mar 18 Javascript
Vue cli构建及项目打包以及出现的问题解决
Aug 27 #Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 #Javascript
vue实例中data使用return包裹的方法
Aug 27 #Javascript
vue项目打包部署到服务器的方法示例
Aug 27 #Javascript
解决vue中修改了数据但视图无法更新的情况
Aug 27 #Javascript
解决vue接口数据赋值给data没有反应的问题
Aug 27 #Javascript
vue 修改 data 数据问题并实时显示的方法
Aug 27 #Javascript
You might like
phpmyadmin安装时提示:Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
Javascript 更新 JavaScript 数组的 uniq 方法
2008/01/23 Javascript
JS解密入门 最终变量劫持
2008/06/25 Javascript
JavaScript 原型继承
2011/12/26 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
jquery获取checkbox的值并post提交
2015/01/14 Javascript
jQuery制作仿Mac Lion OS滚动条效果
2015/02/10 Javascript
jQuery实现带动画效果的二级下拉导航方法
2015/03/11 Javascript
使用js复制链接中的部分文字的方法
2015/07/30 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
2015/09/15 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
那些精彩的JavaScript代码片段
2017/01/12 Javascript
原生js实现简单的模态框示例
2017/09/08 Javascript
JS实现访问DOM对象指定节点的方法示例
2018/04/04 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
2018/08/07 Javascript
vue中的过滤器实例代码详解
2019/06/06 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
2019/08/26 Javascript
vuex入门最详细整理
2020/03/04 Javascript
js动态生成表格(节点操作)
2021/01/12 Javascript
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
复制粘贴功能的Python程序
2008/04/04 Python
用Python生成器实现微线程编程的教程
2015/04/13 Python
python实现求特征选择的信息增益
2018/12/18 Python
django 扩展user用户字段inlines方式
2020/03/30 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
windows10在visual studio2019下配置使用openCV4.3.0
2020/07/14 Python
python 实现非极大值抑制算法(Non-maximum suppression, NMS)
2020/10/15 Python
用css3制作纸张效果(外翻卷角)
2013/02/01 HTML / CSS
高级文秘工作总结的自我评价
2013/09/28 职场文书
建筑工程管理专业自荐信范文
2013/12/28 职场文书
给校长的建议书100字
2014/05/16 职场文书
感谢信的格式
2015/01/21 职场文书
公积金贷款承诺书
2015/04/30 职场文书
地道战观后感300字
2015/06/04 职场文书
2015教师个人年度工作总结
2015/10/23 职场文书