1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > VUE部署nginx解决跨域问题

VUE部署nginx解决跨域问题

时间:2021-04-12 05:35:29

相关推荐

VUE部署nginx解决跨域问题

VUE部署nginx解决跨域问题

Vue的代理跨域问题,需要确定的是在开发阶段可以使用,部署到服务器后出现请求失败的问题(404),如下图。VUE配置的代理

Vue的代理跨域问题,需要确定的是在开发阶段可以使用,部署到服务器后出现请求失败的问题(404),如下图。

这是因为VUE在打包的过程中并没有把代理配置也进行打包,需要配置跨域代理,这里我使用的是服务器是nginx代理实现跨域问题。

先去百度上下载一个nginx,然后进入conf目录,打开nginx.txt配置文件,

找到如下配置

VUE配置的代理

devServer: {proxy: {'/request': { //以request后缀请求target: '地址:端口', //转发地址ws: true,pathRewrite:{'^/request':'/'}, //把request 替换成/changeOrigin: true}}}

转换到对应的服务器的配置跨域如下

server {listen 80;server_name localhost;#匹配请求头为 request,把request 换成/ 然后提交proxy_pass http这个指定地址location ^~/request/ {add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';add_header Access-Control-Allow-Credentials true;proxy_set_header X-NginX-Proxy true;rewrite ^(.*)request(.*)$ $1/$2; break;#root html/dist;proxy_pass http:这里是你的后台地址:端口号;index index.html index.htm;}#匹配以/的请求 然后跳转到指定目录,location / {#我这里是指定的是nginx的html目录下的项目root html/dist;index index.html index.htm;}error_page 500 502 503 504 /50x.html;location = /50x.html {root html;}}

以上配置就可以解决跨域代理问题

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。