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 相关文章推荐
extJs 下拉框联动实现代码
Apr 09 Javascript
jQuery validate 中文API 附validate.js中文api手册
Jul 31 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
Mar 05 Javascript
javascript实现汉字转拼音代码分享
Apr 20 Javascript
js限制文本框只能输入中文的方法
Aug 11 Javascript
JS递归遍历对象获得Value值方法技巧
Jun 14 Javascript
JavaScript实现时钟滴答声效果
Jan 29 Javascript
Javascript中prototype与__proto__的关系详解
Mar 11 Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 Javascript
使用Node.js实现base64和png文件相互转换的方法
Mar 11 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 18 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
Oct 29 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
linux下php上传文件注意事项
2016/06/11 PHP
详解yii2实现分库分表的方案与思路
2017/02/03 PHP
JavaScript 学习 - 提高篇
2007/02/02 Javascript
jquery 实现的全选和反选
2009/04/15 Javascript
理解Javascript_11_constructor实现原理
2010/10/18 Javascript
简单实用的反馈表单无刷新提交带验证
2013/11/15 Javascript
JavaScript中的迭代器和生成器详解
2014/10/29 Javascript
jQuery实现立体式数字滚动条增加效果
2016/12/21 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
2019/03/14 Javascript
koa大型web项目中使用路由装饰器的方法示例
2019/04/02 Javascript
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
2020/10/26 Javascript
python自动安装pip
2014/04/24 Python
python中redis的安装和使用
2016/12/04 Python
详解Python中的type和object
2018/08/15 Python
详解python while 函数及while和for的区别
2018/09/07 Python
python根据list重命名文件夹里的所有文件实例
2018/10/25 Python
Python opencv实现人眼/人脸识别以及实时打码处理
2019/04/29 Python
Python爬虫之Selenium中frame/iframe表单嵌套页面
2020/12/04 Python
canvas实现圆形进度条动画的示例代码
2017/12/26 HTML / CSS
美国最大的骑马用品零售商:HorseLoverZ
2017/01/12 全球购物
英国安全产品购物网站:The Safe Shop
2017/03/20 全球购物
Pat McGrath Labs官网:世界上最有影响力的化妆师推出的彩妆品牌
2018/01/07 全球购物
同步和异步有何异同,在什么情况下分别使用他们?
2012/12/28 面试题
视光学毕业生自荐书范文
2014/02/13 职场文书
内刊编辑求职自荐书范文
2014/02/19 职场文书
幼儿教师师德师风自我剖析材料
2014/09/29 职场文书
学校党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
公司放假通知怎么写
2015/04/15 职场文书
毕业生捐书活动倡议书
2015/04/27 职场文书
幼儿园新学期开学寄语
2015/05/27 职场文书
如何书写读后感?(附范文)
2019/07/26 职场文书
2019年亲子运动会口号
2019/10/11 职场文书
Java实战之课程信息管理系统的实现
2022/04/01 Java/Android
JS轻量级函数式编程实现XDM三
2022/06/16 Javascript
React如何使用axios请求数据并把数据渲染到组件
2022/08/05 Javascript