域名.png

1.什么是跨域

跨域: 协议,子域名,主域名,端口不同时候就叫跨域
同源策略:不允许从一个域访问到另一个域的对象

2.如何解决跨域

2.1前端跨域

jsonp跨域

Jsonp(JSON with Padding) 是 json 的一种”使用模式”,可以让网页从别的域名(网站)那获取资料,即跨域读取数据。

  1. /* jquery-ajax jsonp*/
  2. $.ajax({
  3. url:"http://192.168.4.18:7000/ad",
  4. method:"get",
  5. dataType:"jsonp",
  6. success:res=>{
  7. console.log(res)
  8. }
  9. })

script标签(了解)

原理:script不受同源策略的限制

  1. var script = document.createElement("script");
  2. script.src = "http://192.168.4.18:7000/ad?&callback=handleResponse";
  3. document.body.prepend(script);
  4. function handleResponse(res) {
  5. // 对response数据进行操作代码
  6. console.log(res)
  7. }

2.2服务端跨域

  1. koa.js
  2. koa2-cors//中间
  3. const cors = require("koa2-cors");
  4. app.use(cors({
  5. origin:"*"
  6. }));
  7. //所有其他的域,都可以访问本域
  1. const koa = require("koa");
  2. const app = new koa();
  3. app.use(async ctx=>{
  4. ctx.set('Access-Control-Allow-Origin','*')
  5. ctx.body = {
  6. name:"cheng"
  7. }
  8. })
  9. app.listen(5000)