跨域问题 | Notion

跨域及跨域的解决方法

1.为什么会出现跨域问题

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）。

2.什么是跨域

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

Untitled

3.非同源限制

【1】无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB

【2】无法接触非同源网页的 DOM

【3】无法向非同源地址发送 AJAX 请求

4.解决跨域问题

通过后端解决这个主要解决端口和协议跨域的问题。
在前端解决

然后是详细的方法了，后端方法有（应该不全，望提醒补充）： 1）CORS（跨域资源共享）（cross-origin resourse sharing）通过服务器的response响应头里参数标注（参考阮神的文章）： Access-Control-Allow-Origin: * Access-Control-Allow-Credentials:true 2 ）服务器代理跨域是js的特性，服务端不受影响，所以可以用服务器来请求对应的数据，再返给前端，这个也是本人用的比较多的然后就是前端来处理跨域问题 1）Ajax的jsonp 它利用的是html标签中src属性可以不受跨域影响的特性。这个写的比较全面 2）document.domain主要用于主域名相同的不同子域名之间的跨域 3）http-proxy-middleware 代理解决（项目使用vue-cli脚手架搭建

Vue前端解决跨域问题

在使用vue-cli时会遇到跨域问题解决方法如下： 1、在项目中config文件夹下的index.js文件里面有个module.exports对象，里面有个dev对象中有个proxyTable对象在里面新加一下代码

proxyTable: {
  '/api':{
     target:'<https://mp.csdn.net>',//后台的IP或域名checkOrigin:true,
     pathRewrite:{
       '^api':''//在使用时直接用/api+接口就可以调用了
     }
  }
},

2、调接口时候 URL按照图片中红色框的写法，url: 'api/' + url, 前面的api是你的源地址，后面的url是你的接口地址（此接口地址是除去前面的域名的）

let url = '/api+接口';
let params = {};
$post.post(url,params).then(res=>{})