使用vue-cli搭建的vue项目
可以使用在项目内设置代理(proxyTable)的方式来解决跨域问题
设置配置项的目录在config下的index.js,主要通过配置proxyTable项,设置代理指向你的后台地址
dev: { env: require('./dev.env'), port: 8085, autoOpenBrowser: true, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/agent': { target: 'http://127.0.0.1:7105/', changeOrigin: true, pathRewrite: { '^/agent': '' } } }, // 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 }
前端使用vue-resource来发起请求时
//在main.js中设置公用的地址 Vue.prototype.rootUrl = '/agent/'; //在具体page中发起请求的方式 that.$http.post(this.rootUrl + 'login', parms).then(function (response) { // 响应成功回调 console.log(response); }, function (response) { // 响应错误回调 });
其他方式搭建的前端项目,通过使用nginx启动前端服务同时配置代理
下列是我的nginx配置文件,不管是通过什么方式搭建的前端项目,构建成功后都会输出一个dist文件,我们只需要将nginx服务目录指向你的dist文件下你项目的入口文件即可
我的文件目录是 root D:\openplatform\portal\webapp\dist; 更改此条配置到你的目录 我入口文件名称是index.html 使用的是vue-cli打包的项目,参考vue-cli npm run build的dist目录,指向那个目录下
#user nobody; worker_processes 4; #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" "$gzip_ratio" $request_time $bytes_sent $request_length'; log_format main '[$time_iso8601] [$remote_addr] [$request] [$http_user_agent] [$cookie_customerID_cookie_flag] [$args]'; access_log logs/access.log main; sendfile on; #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout 65; gzip on; gzip_min_length 1k; gzip_buffers 4 16k; gzip_http_version 1.0; gzip_comp_level 3; gzip_proxied any; gzip_types *; server { listen 80; root D:\openplatform\portal\webapp\dist; index index.html; location / { try_files $uri $uri/ @router; index index.html; } location @router { rewrite ^.*$ /index.html last; } location ^~/agent/ { proxy_pass http://127.0.0.1:7105/; proxy_redirect http://127.0.0.1:7105/ /; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header REMOTE-HOST $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_connect_timeout 600s; proxy_read_timeout 600s; proxy_send_timeout 600s; } } # 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 ssl; # server_name localhost; # ssl_certificate cert.pem; # ssl_certificate_key cert.key; # ssl_session_cache shared:SSL:1m; # ssl_session_timeout 5m; # ssl_ciphers HIGH:!aNULL:!MD5; # ssl_prefer_server_ciphers on; # location / { # root html; # index index.html index.htm; # } #} }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月25日
2024年09月25日
- 杨千嬅.2002-万紫千红演唱会2CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 郭采洁.2015-Begin.Again爱造飞鸡【华纳】【FLAC分轨】
- 许志安.2011-ON.AND.ON【东亚】【WAV+CUE】
- 潘秀琼.1994-木兰从军【名将】【WAV+CUE】
- 纯音入心系列纯音乐《古筝系列-当流行乐遇到古筝》1CD[MP3][1.9GB]
- 纯音入心系列纯音乐《精选古筝名曲100首》1CD[MP3][388.7MB]
- 纯音入心系列纯音乐《天籁古筝》1CD[MP3][331MB]
- 男女对唱典藏天碟《发烧对唱·那个季节里的歌DSD》10CD[WAV]
- 群星2010-歌林精选辑[歌林][WAV+CUE]
- TrioZimbalist-PianoTriosofWeinberg,Auerbach,Dvorak(2024)[24-44,1]wav
- 群星.1992-滚石第一流台湾歌·12王牌大车拼【滚石】【WAV+CUE】
- 林子祥.1984-创作歌集【华纳】【WAV+CUE】
- 周汤豪.2010-周汤豪【华纳】【FLAC分轨】
- Mozart-TheStringQuintets-AmadeusQuartet,CecilAronowitz(2017)[24-44,1][WAV+CUE]
- JamesWilliamsDennisIrwin-Focus(2024,Red)[24-48]FLAC