【网络】浅谈前端跨域问题及使用代理解决跨域问题_正向代理解决跨域

一、跨域是什么

是由于浏览器存在的同源策略，ajax请求资源和当前位置是否同源。
同源：协议、域名、端口号必须完全一致， 违背同源策略就是跨域。

二、特点

（1）跨域只存在于浏览器发请求，服务器不会。
（2）http分两大类：普通http请求和ajax请求，跨域出现在ajax请求中。

三、解决方案

1、jsop

1、介绍

非官方跨域解决方案，只支持get请求

2、工作原理

在网页有一些标签天生具有跨域能力，比如：img link iframe script。JSONP就是利用script标签的跨域能力来发送请求。

3、步骤

（1）客户端通过script标签发送请求，同时传递一个函数

btn.onclick=function(){
  // 1、创建标签
  const script=document.createElement('script');
  // 2、设置script的src属性(指向跨域资源)
  script.src="http://127.0.0.1/jsonp-server?callback=handle"
  // 3、将标签插入到文档中
  document.body.appendChild(scrpt);
}
1
2
3
4
5
6
7
8

（2）服务器端将数据以参数的形式返回给客户端

const express=require('express')
app.get('/jsonp-serve',(request,reponse)=>{
  // 响应js代码
  response.end('console.log('ABC')')
})
  // 响应数据
  const data={
    name:'atguigu',
    age:7
  }
  // 转化为JSON字符串
  let str =JSON.stringify(data);
  // 获取请求参数
  let fn=request.query.callback;
  // 返回结果函数调用的字符串 有调用 无报错！！！！！！！！！！！！！
  response.end(`${fn}(${str})`)
app.listen(80,()=>{
  console.log('serve is running....')
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

（3）客户端收到数据，执行函数

// handle函数对里边的数据进行操作
function handle(data){
  let h1=document.createElement('h1');
  h1.innerHTML=data.name;
  document.body.appChild(h1);
  console.log(data);
}
1
2
3
4
5
6
7

4、jQuery -jsonp

$('button').click(function(){
  // 发送JSONP请求 两个参数：请求资源 事件处理函数
  $.getJSON('http://127.0.0.1/jsonp-server?callback=?',function(data){
    console.log(data)
  })
})
1
2
3
4
5
6

2、跨域资源共享

（1）简介

跨域资源共享。CORS是官方的跨域解决方案，在服务器中进行处理，支持get和post请求。

（2）工作原理

CORS是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。

（3）使用步骤

主要是服务器端的设置：

app.get('/server',(request,response)=>{
  
//通过res来设置响应头，来允许跨域请求
response.setHeader("Access-Control-Allow-Origin","http://127.0.0.1:3000")
})
response.set("Access-Control-Allow-Origin","*");
response.send("testAJAX返回的响应");
});
1
2
3
4
5
6
7
8

3、正向代理

使用webpack配置代理服务器
本身我们现在就跑在开发服务器 webpack-dev-server
而这个服务器带了一个模块http-proxy-middleware，这个模块可以支持我们使用代理
通过代理，将前端发的浏览器请求转化为服务器向服务器的请求。

devServer:{
    proxy:{   
   // 发送的路径 http://127.0.0.1/user/login
   // 本地 http://localhost:8080/api/user/login
        
   // 检查本地所有以/api开头的请求路径,将api前面的路径改为target路径  
   // 发送路径无api，替换成空串。
   '/api':{
    target:" http://127.0.0.1",
    // 这一步完成后： http://127.0.0.1/api/users/info
    pathRewrite:{'^/api': ""}, // 路径重写，如果路径以api开头，替换为空串
    // http://localhost:4000/users/info
    changeOrigin:true // 支持跨域
   }
 }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

4、反向代理

页面请求发送给nginx服务器，nginx根据配置动态匹配要请求的服务器地址，最终的请求由nginx服务器发出解决跨域

location /api {
  add_header 'Access-Control-Allow-Origin' '*';
  proxy_pass http://fanyi.baidu.com/v2transapi;
}
1
2
3
4