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 相关文章推荐
获取表单控件原始(初始)值的方法
Aug 21 Javascript
jQuery中filter()方法用法实例
Jan 06 Javascript
JavaScript闭包详解
Feb 02 Javascript
jQuery向后台传入json格式数据的方法
Feb 13 Javascript
老司机带你解读jQuery插件开发流程
May 16 Javascript
json字符串传到前台input的方法
Aug 06 Javascript
浅谈ECMAScript 中的Array类型
Jun 10 Javascript
js实现移动端吸顶效果
Jan 08 Javascript
iview实现图片上传功能
Jun 29 Javascript
vue项目中使用多选框的实例代码
Jul 22 Javascript
vue element ui validate 主动触发错误提示操作
Sep 21 Javascript
为什么node.js不适合大型项目
Apr 28 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
Content-type 的说明
2006/10/09 PHP
常用表单验证类,有了这个,一般的验证就都齐了。
2006/12/06 PHP
PHP+JS+rsa数据加密传输实现代码
2011/03/23 PHP
php数组函数序列之array_key_exists() - 查找数组键名是否存在
2011/10/29 PHP
PHP实现二维数组去重功能示例
2017/01/12 PHP
win7 wamp 64位 php环境开启curl服务遇到的问题及解决方法
2018/09/16 PHP
JS处理VBArray的函数使用说明
2008/05/11 Javascript
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
2013/02/22 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
Jquery性能优化详解
2014/05/15 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
2014/10/19 Javascript
深入理解ES6中let和闭包
2018/02/22 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
node.JS二进制操作模块buffer对象使用方法详解
2020/02/06 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
python中list常用操作实例详解
2015/06/03 Python
关于Python元祖,列表,字典,集合的比较
2017/01/06 Python
浅谈Python使用Bottle来提供一个简单的web服务
2017/12/27 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
python opencv实现证件照换底功能
2019/08/19 Python
python FTP编程基础入门
2021/02/27 Python
html5-canvas中使用clip抠出一个区域的示例代码
2018/05/25 HTML / CSS
YSL圣罗兰美妆俄罗斯官网:Yves Saint Lauret RU
2020/09/23 全球购物
JAVA程序员面试题
2012/10/03 面试题
医学专业应届生的自我评价
2014/02/28 职场文书
小学班主任培训方案
2014/06/04 职场文书
2014国庆65周年领导讲话稿(3篇)
2014/09/21 职场文书
高中生军训感言
2015/08/01 职场文书
领导干部学习三严三实心得体会
2016/01/05 职场文书
《平行四边形的面积》教学反思
2016/02/16 职场文书
anaconda python3.8安装后降级
2021/06/11 Python
MongoDB数据库的安装步骤
2021/06/18 MongoDB
MySQL 条件查询的常用操作
2022/04/28 MySQL