出现问题:在本地运行,有配置vue.config.js中的proxy,所以解决了跨域问题。但将项目打包放到服务器上去,在打包的过程中,proxy是不会被打包进去的,也就是说代理所配置的跨域就已经失效了。问题直接上图:

解决问题

首先,需要在服务器下载nginx并配置nginx.conf文件(位置在nginx中的conf文件夹),以及将打包好的dist文件夹放在nginx中的html文件夹内。下图是我的nginx.conf文件的配置

 到这里,依旧是还没解决最前面所说的跨域问题,还剩下最后一步

参考了下面这个博主的方法就解决了,直接上链接:跨域问题Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin_捕获了一个异常的小机灵鬼的博客-CSDN博客

 最后解决问题是让后端同事设置了header(按照上述文章设置了header)

吐槽:后端同事一直跟我说后端已经处理好跨域问题了,现在我将打包好的文件放到服务器出现跨域,那就是我前端的问题。这个问题困扰了我一周时间,最后赶着时间上线,我前端这边已经尝试了无数种方法,无数种配置nginx还有其他配置都没能有效解决问题,厚着脸皮(为了能及时上线),叫后端同事设置一下header,果然问题就解决了。。。解决完后,后端同事又跟我说之前我都是原有的配置都是正常不会出现跨域的,这次出现跨域肯定是你nginx没有配好,然后他再添加了header,所以就解决了这次问题。(最开始跟我说后端解决好跨域了,接着出现跨域问题,叫我自己解决,再接着我将上面的那个文章发给后端看,后端按照文章内容添加了header才解决问题,最后又说是我nginx没配置好,配置好了,他就不用加header了...)

我想说,跨域问题最好是前后端同事一起协商解决,不单是前端,也不单是后端的问题,如果刚开始出现了这种问题,前后端能够一起寻找问题并解决,就不会出现因一个跨域问题搞了一周时间的事故了。

无力吐槽了,记录生活、工作、学习中所遇到的问题。

更多推荐

Response to preflight request doesn‘t pass access control check: No ‘Access-Cont