首先，我们要了解什么是跨域？
浏览器的同源策略是浏览器上为安全性考虑实施的非常重要的安全策略。
从一个域上加载的脚本不允许访问另外一个域的文档属性。
举个例子：比如一个恶意网站的页面通过iframe嵌入了银行的登录页面（二者不同源），
如果没有同源限制，恶意网页上的javascript脚本就可以在用户登录银行的时候获取用户名和密码。
何谓同源:URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示它们同源。
在浏览器中，<script>、<img>、<iframe>、<link>等标签都可以加载跨域资源，而不受同源限制，
但浏览器会限制脚本中发起的跨域请求。比如，使用 XMLHttpRequest 对象和Fetch发起 HTTP 请求就必须遵守同源策略。
Web 应用程序通过 XMLHttpRequest 对象或Fetch能且只能向同域名的资源发起 HTTP 请求，而不能向任何其它域名发起请求。
不允许跨域访问并非是浏览器限制了发起跨站请求，而是跨站请求可以正常发起，但是返回结果被浏览器拦截了。
最好的例子是CSRF跨站攻击原理，请求是发送到了后端服务器,无论是否设置允许跨域,
有些浏览器不允许从HTTPS跨域访问HTTP，比如Chrome和Firefox，这些浏览器在请求还未发出的时候就会拦截请求,这是特例。
其次，Vue cli3是如何解决跨域的？
我们再来看看Vue官网是怎么说明的
很明显是想让我们新建一个vue.config.js 通过devServe.proxy来进行解决跨域问题；
问题是vue.config.js新建在哪个位置？我们需要在package.json同级目录下新建vue.config.js文件
新建完之后，在vue.config.js文件里面输入以下代码；target就是我们要请求的后端服务地址；
ws表示是否要开通链接websoket请求；changeOrigin表示是否要跨域请求；这里的作用，相当于是替代‘/api’，如果接口中是没有api的，那就直接置空，就像我截图的一样，如果接口中有api，那就得写成{‘^/api’:‘/api’}，可以理解为一个重定向或者重新赋值的功能。
最后，最关键的一步，就是在我们的main.js中导入axios后要对axios.defaults.baseURL进行设置代理；很多人会把这一步丢掉，造成还是解决不了跨域问题；
如果后端请求接口有多个，或者说请求的端口号不同我们前端该如何处理？
这时我们可以在proxy中继续新增请求地址；如上图所示；我们可以根据业务需求进行接口配置；
我是这样处理的，在muonted中对axios.defaults.baseURL按照对应的业务需求进行调整；
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdkf/60968.html