vue跨域解决方案 简书,vue项目如何解决跨域问题

　　一般我们的前端vue项目都会涉及到跨领域的问题。以下文章主要介绍Vue项目部署中跨域问题的详细解决过程。通过示例代码详细介绍，有需要的朋友可以参考一下。

目录

　　首先后端：然后前端：总结跨领域问题。将项目从前端和后端分开是非常常见的。至于为什么采用跨域和同源策略，百度的各种博客都很详细，这里就不介绍了。它们主要记录项目和求解过程中的各种设置。

首先是后端：

　　过滤器：

　　@配置

　　公共类GlobalCorsConfig {

　　/**

　　*允许跨域呼叫的过滤器

　　*/

　　@Bean

　　公共CorsFilter corsFilter() {

　　CORS configuration config=new CORS configuration()；

　　//允许所有域名进行跨域呼叫

　　config . addallowedoriginpattern( * )；

　　//config . addallowedorigin( * )；

　　//允许跨发送cookie

　　config . setallowcredentials(true)；

　　//释放所有原始头信息

　　config . addallowedheader( * )；

　　//允许跨域调用所有请求方法

　　config . addallowedmethod(“*”)；

　　UrlBasedCorsConfigurationSource source=new UrlBasedCorsConfigurationSource()；

　　source . registercorsconfiguration(/* * ，config)；

　　返回新的CorsFilter(源)；

　　}

　　}

　　如果setAllowCredentials为true，则config . addallowedrigin(“*”)的参数不能是*，必须加以指示。请在这里直接注释掉，并使用addAllowedOriginPattern。

　　控制器层：

　　路径包含web，这非常重要，记住

　　Yml文件：

　　后端端口8086，应用程序上下文路径：/weijianweiAdminApi

再是前端：

　　在dev.env.js中将BASE_API设置为/web

　　在index.js的dev中设置proxyTable，这里有一个开发过程中在node.js上实现的转发，将请求转发到后端，主要解决开发过程中的跨域问题。

　　设置好这些之后，npm运行dev，项目就可以在本地运行了。

　　开发完成后，项目被打包并放在服务器上：

　　首先在服务器的nginx的html文件夹中创建一个名为weijianwei的文件夹。

　　把npm运行生成的文件编译成包放在卫健委：

　　将索引中的assetsPublicPath修改为weijianwei，对应上面的文件夹名称。

　　设置nginx配置文件nginx.conf:

　　服务器{

　　听8099；

　　server_name本地主机；

　　位置/weijianweiAdminApi/{

　　proxy _ set _ header Host $ host

　　proxy _ set _ header X-Real-IP $ remote _ addr；

　　proxy _ set _ header X-Forwarded-For $ proxy _ add _ X _ Forwarded _ For；

　　Proxy _ set _ header X-NginX-Proxy true；

　　client _ max _ body _ size 200m

　　proxy _ pass http://localhost:8086；

　　}

　　}

　　监听端口8099，匹配路径weijianweiAdminApi，转发到http://localhost:8086，

　　这时，访问项：http://localhost:8099/weijianwei成功出现在页面上。登录时，预检请求通过，跨域问题正式请求。

　　前端项目prod.env.js设置BASE_API:

　　成功登录访问

总结

　　这篇关于vue项目跨域部署的文章到此为止。更多vue项目部署的跨领域内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。