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

前端之家收集整理的这篇文章主要介绍了vue打包使用Nginx代理解决跨域问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

解决方法有一下几种

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

推荐

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

vue index.js文件源码

IoUs 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 配置文件源码

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; }

成功截图


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

原文链接:https://www.f2er.com/vue/30713.html

猜你在找的Vue相关文章