Vuecli 前端跨域问题解决

前端跨域问题解决

跨域最好的解决办法就一个让后端解决，前端只能设置本地代理

但如果后端说：我这设置了允许跨域的，你这怎么会跨域呢......要是后端说他已经设置好了跨域问题，觉得是前端的问题我们千万不要埋头自己去找问题

后端可能会抛出以下质疑：

质疑1

我这postman里面明明可以正常访问的，为啥你这就会跨域呢？

        要理解什么是跨域，跨域是指的当前资源访问其他资源时发起的http请求由于安全原因（由于同源策略，域名、协议。端口中只要有一个不同就不同源），浏览器限制了这些请求的正常访问，特别需要注意的是这些发生在浏览器中。而通过postman等工具调用接口时，只是简单的访问一个资源，并不存在资源的相互访问。并不是说postman正常浏览器就正常的。

质疑2

后端：你看我这都是*（给你截图一堆看不懂的后端代码），是允许所有的都可以访问的

        1.如果没有响应标头，可以直接先试试其他的Ajax请求方法，比如我是试了一下uniapp的请求方法也是跨域。

       2. 检查一下响应标头，如果属性重复了，也会有问题。下面是正常情况下的响应标头

         3.在发起post请求时，代码不止发一次，会先发一个options请求，所以，注意不要重复添加，否则也不能解决问题

质疑3：你对接其他的接口都没报跨域，怎么就这一个接口报跨域了

        估计是这一个接口报错，浏览器也会解析出跨域的报错。先到postman看看，是不是500之类的报错

质疑4：我这边已经都配置好了，你这么还是报错嘞，我接口给别人都正常的，他们没有跨域。

        如果别人都正常，那就不要怪后端了，看看什么原因。注意如果是HTTPS域名是不能访问http 的api接口，要不然也会报错。也要注意api请求接口是HTTPS还是http。检查一下请求头之类的是否和后端需要的一致

说什么前端代理啥的都不要看，不能让后端闲着，特别是小白，以为是自己的问题，自己埋头解决问题，不敢和后端说。