- 在工作中遇到各种各样的bug。但是参加工作第一天起，第一次所遇到的bug是一个跨域的问题。
对跨域的这个问题，首先需要了解什么是跨域。大体可以分为三类，协议不同，域名不同，端口不同。
浏览器的同源策略是确保浏览器安全的特别重要的一个安全策略,如果没有同源策略：在一个域上加载的脚本不允许访问另一个域上文本属性 不然通过内嵌 iframe 恶意添加 javaScript 脚本就可以轻松获取到用户信息
何为同源：url 是由协议、域名、端口和路径组成 如果两个路径的协议、域名、端口都相同则表示再同一个域上
在浏览器上
理解了跨域原理，在说说日常项目中，解决跨域的方案
1.JSON跨域
jsonp的原理就是利用
(1) jquery Ajax实现：
$.ajax({
url: 'http://localhost:8080/login',
type: 'get',
dataType: 'jsonp', // 请求方式为jsonp
data: {}
});2.Vue跨域处理
- 利用http-proxy-middleware 代理解决
devServer:{
proxy:{
"/api":{
target:"http://localhost:8080" //数据接口的地址
changeOrigin:true, // 允许跨域
secure:false, // 允许运行在https上
pathRewrite: { //如果你不想总是传递 /api,可以重写路径
'^/api': ''
}
}
}- 后端使用cors解决跨域问题，这里采用node + express实现
首先安装 npm install cors -S
然后在app.js直接使用即可
app.use(require('cors')())4.nginx代理跨域
nginx代理跨域，实质和CORS跨域原理一样，通过配置文件设置请求响应头Access-Control-Allow-Origin…等字段。
通过Nginx配置一个代理服务器域名与aaa相同，端口不同）做跳板机，反向代理访问aaa2接口，并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域访问
#proxy服务器
server {
listen 80;
server_name www.domain1.com;
location / {
proxy_pass http://aaa.com; #反向代理
proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
index index.html index.htm;
# 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用
add_header Access-Control-Allow-Origin http://www.domain1.com; #当前端只跨域不带cookie时，可为*
add_header Access-Control-Allow-Credentials true;
}
}
以上就是解决跨域最常用见的方法
