express (jsp)跨域请求转发 带参数（带token）

时间过去一个星期了 来记录一下困扰我1天的问题 “跨域 ,代理”

情景：本地服务需访问外部接口 接口以端口号的形式地址；本地服务运行在本机tomcat上；如果直接发送ajax 请求的话就会报各种跨域失败的错误 基本错误就是：域不同 端口不同 等等；

解决方法:

1.tomcat 写一个pxory.jsp

//新建一个jsp文件命名pxory.jsp 放置在webapps/ROOT 下
  <%@ page import="java.net.*,java.util.*,java.lang.*,java.io.*,java.util.Map,java.util.Map.Entry"%>
<%@ page contentType="text/xml;charset=UTF-8"%>
<%  
    //1.接收url参数
    String url = null;
    String typeString ="application/json;charset=utf-8";
    StringBuffer params = new StringBuffer("{");
    Enumeration enu = request.getParameterNames(); 
    String token = "";
    while (enu.hasMoreElements()) {
                //截取url中?后的参数
        String paramName = (String) enu.nextElement(); 
        if (paramName.equals("url")) {
            url = request.getParameter(paramName); 
            System.out.println("请求URL------"+url);
        } else if(paramName.equals("type")) { 
                    //判断属性是否为type 是则做处理
            if(request.getParameter(paramName).equals("type")){
                // 登录
                typeString="application/json;charset=utf-8";
            }else{
                typeString="application/x-www-form-urlencoded;charset=utf-8";
            }
         }else if(paramName.equals("token")){
             token=request.getParameter(paramName);
         } else{
             // params.append("\""+paramName+"\"").append(":").append(URLEncoder.encode( request.getParameter(paramName), "UTF-8")).append(",");
//拼接所有的参数           
 params.append("\""+paramName+"\"").append(":").append("\""+request.getParameter(paramName)+"\"").append(",");
         }
    }
    params.deleteCharAt(params.length() - 1);
    params.append("}");
    System.out.println("获取的参数---------------"+params);
    //2.请求url获取数据 
    if (url != null) {
        URL connect = null;
        connect = new URL(url);
        OutputStream os=null;
        BufferedReader reader=null;
        String line;
        String param = params.toString();
        HttpURLConnection connection = (HttpURLConnection)connect.openConnection();
        //判断请求方法
        switch(request.getMethod()){
            case "POST":
                    connection.setConnectTimeout(3000);  
                    connection.setReadTimeout(3000);  
                    connection.setDoOutput(true);
                    connection.setDoInput(true);
                    connection.setUseCaches(false);  
                    connection.setRequestMethod("POST");
                    connection.setRequestProperty("Content-type",typeString);
                    connection.setRequestProperty("token",token);
                    connection.connect();
                    os = connection.getOutputStream();  
                    // 传入参数 param
                    os.write(param.getBytes()); 
                    os.flush();
                    os.close();
                    reader = new BufferedReader(new InputStreamReader(connection.getInputStream(), "utf-8"));
                    while((line = reader.readLine()) != null){
                     //输出
                        out.println(line);
                    }
                    reader.close();
            break;
            case "GET":
                connection.setConnectTimeout(3000);  
                connection.setReadTimeout(3000);  
                connection.setDoOutput(true);
                connection.setDoInput(true);
                connection.setRequestMethod("GET");
                connection.setRequestProperty("Content-type",typeString);
                connection.setRequestProperty("token",token);
                connection.connect();
                os = connection.getOutputStream();  
                // 传入参数 param
                os.write(param.getBytes()); 
                os.flush();
                os.close();
                reader = new BufferedReader(new InputStreamReader(connection.getInputStream(), "utf-8"));
                while((line = reader.readLine()) != null){
                    out.println(line);
                }
                reader.close();
                break;
            }
            
        }   
%>

前端在发送ajax请求的时候:

    $.ajax({
              //使用jsp代理 要先执行jsp；
                url: 'http://[你的server地址]:[port]/proxy.jsp?username=clientpage&password=123123&url=[你需要代理访问url]',
                type: 'POST',
                contentType: "application/json",
                success: function(res) {
                    cb(res)
                },
                error: function(err) {
                    console.log('err', err);
                }
            });
          //个人觉得 jsp 太麻烦 显得繁琐 并且java我已经一年没看了 方法基本忘记了

2.使用 node + express +cors+axios+body-parser

express： 写接口的 
cors：跨域的
axios：发送请求的（也可以http模块 但是axios好用）
body-parser：解析接收的参数到body

//引用所需模块
const express =require('express')；
//实例化
const app =express();
const axios = require('axios');
const bodyparser = require('body-parser');
//解决前台访问时跨端口
app.use(require('cors')());
//监听端口
app.listen(3000,function(){
    console.log('server run port 3000')
});
//使用中间件解析url
app.use(bodyparser.urlencoded({extende:true}));
//接收所有请求  
app.all('/',function(req,res){
    //接收到请求方式
    const method= req.method;
    //接收url中的参数
    const query =req.query;
    const {url}=query;
    //解析出url中的需要代理的url
    // console.log(req.query);
    // console.log(req.body);
    // console.log(req.params);
    //定义请求参数
    let obj = {};
    //访问需要带token
    let token ="";
    const keys = Object.keys(req.query);
    //获取token
    keys.forEach(ins=>{
        if(ins=='token'){
            token = query[ins];
        }else{
            obj[ins]=query[ins];
        }
    });
    //格式化请求参数
    delete obj.url;
    //为请求添加消息头 token
    axios.defaults.headers.common["X-Access-Token"] = token;
    console.log("请求地址",url);
    console.log("请求携带参数",JSON.stringify(obj))
    console.log(obj);
    console.log("-------------");
    switch(method){
    //post
        case"POST":
             axios.defaults.headers.post['Content-Type'] = req.headers["content-type"];
             axios.post(url,obj).then(rest=>{
              //将返回的结果发送
                res.send(rest.data)
                   }).catch(err=>{
                       console.error(err)
                   })
             break;
             
        default:
                   if(req.headers["content-type"]){
                    axios.defaults.headers.get['Content-Type'] = req.headers["content-type"];
                   }else{
                    axios.defaults.headers.get['Content-Type'] ="application/x-www-form-urlencoded";
                   }
              axios.get(url,{params:obj}).then(rest=>{
                 res.send(rest.data)
                    }).catch(err=>{
                        console.log(err);
                        res.send(err)
                    })
             break;
    }
})

前台请求方法：

//serverIp:sever运行地址  proxyUrl：需要代理的地址
$.ajax({
                url: 'http://[serverIp]:[port]?username=clientpage&password=123123&url=[proxyUrl]',
                type: 'POST',
                //这边也可以把要传的值放入data中
                contentType: "application/json",
                success: function(res) {
                    cb(res)
                },
                error: function(err) {
                    console.log('err', err);
                }
            });

总计一下 原理其实很简单 将请求转发到本地服务中就不存在跨域 ；
本地就需要搭建一个服务 发送接收过来的地址 带上参数就好了....支持走一波