- 同源策略:
浏览器内置的规则！是浏览器提供的一种安全机制，限制来自不同源的数据。如果当前页面的URL地址和Ajax的请求地址不同源，浏览器不允许得到服务器的数据；
- 同源:
协议 http||https、域名和 port端口 都相同则同源，只要有一项不同就是不同源
- 跨域:
不同源就跨域
跨域请求出现错误的条件： 浏览器同源策略 && 请求是ajax类型
文件资源-不受同源限制
通过页面内标签、直接在地址栏输入 / 文件资源是通过link script标签访问 url 的
注意:
JSONP和json没有任何关系
JSONP需要前后台配合
1.1实现原理:（另辟蹊径、瞒天过海）
- 如果直接使用ajax的形式，提醒跨域报错；
- 走文件资源的形式
- 改进 ↓
1.2 jQuery封装JSONP
- $.ajax() 该方法可以发送jsonp请求，但是jsonp请求本质上不是Ajax;
- 和jsonp相关的两个属性 script.src = ‘xx地址?callback=nihao&uname=lisi&age=12’;
- jsonp 属性的值为了迎合后端（后端根据该名称获取回调函数的名字）；jsonp的值决定了等号左侧的那个名字
- jsonpCallback 决定等号右侧的内容(服务端返回的函数调用的名称)
- 特点：
- script标签发出请求本身就是get，不支持别的请求方式
- get请求传递的数据量有限制（URL地址的长度不超过8000个字符）
浏览器同源政策及其规避方法
跨域资源共享 CORS 详解
- 一般都是后台设置
- 在被请求的服务器中使用express框架的中间件进行相应的请求拦截从而进行响应头的配置（相当于将客户端添加到服务器可访问的白名单）。
- 在使用Ajax技术发送跨域请求时，默认情况下不会在请求中携带cookie信息，如需要连cookie信息一起传递到另一服务器则需要在客户端和服务器端进行以下配置：
- 认识环境变量-端口配置
vue.config.js 就是vue项目相关的编译，配置，打包，启动服务相关的配置文件，它的核心在于webpack，相当于在webpack的基础上又做了一次抽象。官网地址： 地址
下图是开发环境服务端口的在vue.config.js中 位置
我们看到上面的 process.env.port实际上是一个nodejs服务下的环境变量
- 环境变量的配置文件
在一些特殊的配置文件中定义环境变量
- 在项目运行的过程中，通过不同的命令，能加载不同的配置文件，从而获取不同的环境变量。
- 定义环境变量-示例
- 使用环境变量
更多阅读：vue-cli 环境与变量
- 小结
实现代理服务器
代理转发（只有浏览器会出现跨域问题，服务器与服务器之间不会出现跨域问题）
在ajax的基地在baseUrl的参数必须是相等地址，不能是绝对地址
Vue-Cli配置代理转发
思路：
vue-cli解决跨域配置说明
在vue.config.js配置文件中，有一项是devServer，它就是我们下边要操作的主角。
基地址
.env.development
api/user.js
小结
- vue-cli集成了跨域代理功能-- 只能用在开发阶段。
- vue.config.js文件中，在devServe下按指定格式配置了proxy，再重启项目即可。
特别强调：
到此这篇跨域是什么,如何解决跨域问题（跨域问题的三种解决方案）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/bcyy/44919.html