js 跨域 post 还有get

http://www.tuicool.com/articles/7ve6ja

post跨域

var post = function (URL, PARAMS) {
    var temp = document.createElement("form");
    temp.action = URL;
    temp.method = "post";
    temp.style.display = "none";
    for (var x in PARAMS) {
       var opt = document.createElement("textarea");
       opt.name = x;
       opt.value = PARAMS[x];
       temp.appendChild(opt);
    }
    document.body.appendChild(temp);
    temp.submit();
    history.go(-1)
};

var apiUrl = 'http://URL地址' + token + '&callback=?';

var content = $("#Content").val;
var contact = $("#Contact").val();
if (content != '' && contact != '') {
   var params = {"content": content, "contact": contact};
     // 直接调用post方法即可
     post(apiUrl, params);
     layer.msg('反馈成功');
}

get方式跨域

var fetchUrl = '带http的url地址' + token + '&callback=?';
$.getJSON(fetchUrl + '', function (res) {
    console.log(res);
});
GET POST 请求在场景下的行为限制主要取决于浏览器的同源策略以及资源共享(CORS)机制。这两种请求方式在时的行为有所不同,具体如下: ### GET 请求的行为 GET 请求是 HTTP 协议中最常见的方法之一,通常用于从服务器获取数据。在场景下,GET 请求的处理相对简单,因为它属于**简单请求(Simple Request)**。简单请求不需要浏览器发送预检请求(preflight request),而是直接发送实际请求。如果服务器允许访问,则浏览器会正常接收响应;否则,浏览器会阻止响应内容的访问。 GET 请求要被视为简单请求,必须满足以下条件: - 使用的 HTTP 方法为 GET。 - 请求的头部只能包含以下字段:`Accept`、`Accept-Language`、`Content-Language`、`Content-Type`(仅限于 `application/x-www-form-urlencoded`、`multipart/form-data`、`text/plain`)。 由于 GET 请求通常用于获取数据,而不会对服务器状态产生影响,因此浏览器对其限制较为宽松。 ### POST 请求的行为 POST 请求通常用于向服务器提交数据,例如表单提交或上传文件。与 GET 请求不同,POST 请求在某些情况下会被视为**非简单请求(Preflighted Request)**,从而触发浏览器发送预检请求(OPTIONS 请求)以确认服务器是否允许请求。 POST 请求被视为非简单请求的条件包括: - 使用的 HTTP 方法为 POST。 - 请求的 `Content-Type` 头部为 `application/json` 或其他非简单类型。 - 请求中包含自定义的头部字段(如 `Authorization`、`X-Requested-With` 等)。 当 POST 请求满足上述条件时,浏览器会先发送一个 OPTIONS 请求,询问服务器是否允许请求。服务器需要在响应头中返回以下字段以允许: - `Access-Control-Allow-Origin`:指定允许访问的。 - `Access-Control-Allow-Methods`:指定允许的 HTTP 方法。 - `Access-Control-Allow-Headers`:指定允许的请求头字段。 - `Access-Control-Max-Age`:指定预检请求的有效时间(可选)。 如果服务器正确配置了这些响应头,则浏览器会继续发送实际的 POST 请求;否则,请求会被拒绝。 ### 场景下的限制 无论是 GET 还是 POST 请求,在时都需要服务器端的支持。如果服务器未正确配置 CORS 相关的响应头,则请求将失败。此外,浏览器还会对以下情况施加限制: - **凭证(Credentials)**:默认情况下,请求不会携带 cookies 或其他认证信息。如果需要携带凭证,请求方需要在请求中设置 `withCredentials` 为 `true`,并且服务器需要在响应头中设置 `Access-Control-Allow-Credentials` 为 `true`。 - **自定义请求头**:如果请求中包含自定义请求头(如 `Authorization`、`X-Token` 等),则必须通过预检请求确认服务器是否允许这些头部。 ### 示例代码 以下是一个使用 Axios 发送 POST 请求的示例: ```javascript axios.post('https://api.example.com/data', { firstName: 'John', lastName: 'Doe' }, { headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer your-token' }, withCredentials: true }) .then(response => { console.log(response); }) .catch(error => { console.error(error); }); ``` 在服务器端,Spring Boot 可以通过以下方式配置 CORS: ```java @Configuration @EnableWebMvc public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/api/**") .allowedOrigins("https://your-frontend-domain.com") .allowedMethods("GET", "POST") .allowedHeaders("Content-Type", "Authorization") .exposedHeaders("X-Custom-Header") .allowCredentials(true) .maxAge(3600); } } ``` ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值