时间过去一个星期了 来记录一下困扰我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);
}
});
总计一下 原理其实很简单 将请求转发到本地服务中就不存在跨域 ；
本地就需要搭建一个服务 发送接收过来的地址 带上参数就好了....支持走一波
网友评论