首页 > 编程 > JavaScript > 正文

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

2019-11-19 13:08:49
字体:
来源:转载
供稿:网友

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: {// PathsassetsSubDirectory: '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 settingshost: 'localhost', // can be overwritten by process.env.HOSTport: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determinedautoOpenBrowser: false,errorOverlay: true,notifyOnErrors: true,poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-/*** Source Maps*/// https://webpack.js.org/configuration/devtool/#developmentdevtool: '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#cachebustingcacheBusting: 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.htmlindex: path.resolve(__dirname, '../dist/index.html'),// PathsassetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: './static',assetsPublicPath: './',/*** Source Maps*/productionSourceMap: true,// https://webpack.js.org/configuration/devtool/#productiondevtool: '#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-pluginproductionGzip: 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 offbundleAnalyzerReport: 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;}

成功截图


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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表