• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

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

vue 搞代码 4年前 (2022-01-08) 63次浏览 已收录 0个评论

这篇文章主要介绍了vue打包使用Nginx代理解决跨域问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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; fa<i>本文来源gaodai$ma#com搞$$代**码)网@</i>stcgi_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代理解决跨域问题的详细内容,更多请关注gaodaima搞代码网其它相关文章!


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:vue打包使用Nginx代理解决跨域问题

喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址