㈠ 前端get请求url拼接多项参数方法
var toString = "";
for (var key in data) {
if(!data[key]){
delete data.key
}else{
var obj = data[key];
if (Array.isArray(obj)) {
var arrayString = obj.join(",");
toString += key + "=" + arrayString + "&";
} else {
厅禅燃 扮虚 toString += key + "=" + data[key] + "&";
}
袭碰 }
}
toString.substring(0, toString.length - 1).replace(/$/, "");
㈡ 前端是vue，后台用的python。前台get请求url中有中文，后台看到链接地址变成了乱码
传递之前先把汉字跟标点符号之类转成urlcode
js代码
encodeURIComponent("哈哈哈哈哈");
输出"%E5%93%88%E5%93%88%E5%93%88%E5%93%88%E5%93%88"
py代码使用urllib将urlcode编码解码
from urllib import parse
get = "%E5%93%88%E5%93%88%E5%93%88%E5%93%88%E5%93%88"
print(parse.unquote(get))
输出"哈哈哈哈哈"
㈢ SpringMVC前后端分离交互传参详细教程-
温故而知新，本文为一时兴起写出，如有错误还请指正
本文后台基于SpringBoot2.5.6编写，前端基于Vue2 + axios和微信小程序JS版分别编写进行联调测试，用于理解前后端分离式开发的交互流程，如果没用过axios可以点我看之前的帖子
如果你没有学过SpringBoot也不要紧，把他看做成SpringMVC即可，写法完全一致（其实我不说你也发现不了）
本文主要讲前后端交互流程，力求帮助新人快速入门前后端分离式开发，不会讲关于数胡环境搭建部分的内容
在文章开头快速的过一遍SpringMVC接收参数的几种方式，一定要记住这几种方式，看不懂或不理解都没关系，后续会结合前端代码过一遍，这里就不过多解释了，直接上代码
细心的人应该留意到了，最后使用变量接收参数的时候只接收了 username 这一个值，并没有接收 password ，作为扩展在这里解释一下， 不看也可以，看了不理解也没关系，知道这个事儿就够了，以后接触多了就理解了
如果请求参数放在了请求体中，只有参数列表第一个变量能接收到值，这里需要站在Servlet的角度来看：
可以看到请求体内容是存到了 InputStream 输入流对象中，想要知道请求体中的内容是什么必须读流中的数据，读取到数据后会将值给第一个变量，而流中的数据读取一次之后就没了，当第二个变量读流时发现流已经被关闭了，自然就接收不到
SpringMVC回顾到此为止，只需要记住那三种方式即可，在前后端交互之前先在Controller中写个测试接口
这个接口对应的是GET类型的请求，这里直接在浏览器地址栏访问测试一下：
这里推荐一个Chrome浏览器的插件 JSONView ，它可以对浏览器显示的JSON数据进行格式化显示，推荐的同时也提个醒，安装需谨慎，如果JSON数据量太大的话页面会很卡
之前已经写好一个GET请求的测试接口了，这里就在前端写代码访问一下试试看
代码已经写完了，接下来打开页面试一下能不能调通：州凳
可以看到请求代码报错了，查看报错信息找到重点关键词 CORS ，表示该请求属于 跨域请求
什么是跨域请求？跨域请求主要体现在跨域两个字上，当发起请求的客户端和接收请求的服务端他们的【协议、域名、端口号】有任意一项不一致的情况都属于跨域请求，拿刚刚访问的地址举例，VUE页面运行在9000端口上，后台接口运行在8080端口上，端口号没有对上所以该请求为跨域请求
如果在调试的时候仔细一点就会发现，虽然前端提示请求报错了，但是后端还是接收到请求了，那为什么会报错呢？是因为后端返回数据后，浏览器接收到响应结果发现该请求跨域，然后给我们提示错误信息，也就是说问题在浏览器这里
怎样才能让浏览器允许该请求呢？我们需要在后端动点手脚，在返回结果的时候设置允许前端访问即可
首先配置一个过滤器，配置过滤器有很多种实现的方法，我这里是实现Filter接口
过滤器创建完成了，回来看前端提示的报错信息为 Access-Control-Allow-Origin ，意思是允许访问的地址中并不包含当前VUE的地址，那么我们就在响应结果时将VUE的地址追加上
添加完成后重启项目后台就会发现请求已经成功并且拿到了返回值
再次册毕旅进行测试，将后台的GetMapping修改为PostMapping，修改前端请求代码后重新发起请求进行测试
可以看到POST请求还是提示跨域请求，对应的错误信息则是 Access-Control-Allow-Headers ，也就是说请求头中包含了不被允许的信息，这里图省事儿用 * 通配符把所有请求头都放行
这样处理之后，请求就可以正常访问啦
路径占位参数，就是将参数作为请求路径的一部分，例如你现在正在看的这篇博客使用的就是路径占位传参
这种传参方法很简单，就不细讲了，可以效仿他这种方法写个测试案例
这里需要注意区分【路径占位传参】和【路径传参】两个概念，不要记混
什么是路径传参？发起一个请求 http://localhost:8080/index?a=1&b=2 ，在路径 ? 后面的都属于路径传参，路径传参就是将参数以明文方式拼接在请求地址后面
路径传参使用【正常接收参数】中的实例代码即可接收到值
除了自己手动拼接请求参数之外，axios在config中提供了params属性，也可以实现该功能
表单类型参数，就是通过form表单提交的参数，通常用在例如HTML、JSP页面的form标签上，但如果是前后端分离的话就不能使用form表单提交了，这里可以手动创建表单对象进行传值
需要注意，GET请求一般只用于路径传参，其他类型传参需要使用POST或其他类型的请求
表单类型参数也是【正常接收参数】中的实例代码接收值
小程序删除了FormData对象，不能发起表单类型参数的请求，如果非要写的话可以试着使用 wx.uploadFile 实现，这里就不尝试了
请求体传参，是在发起请求时将参数放在请求体中
表单类型参数需要使用上面【请求体接收参数】中的实例代码接收值
axios如果发起的为POST类型请求，默认会将参数放在请求体中，这里直接写即可
小程序代码也是一样的，当发起的时POST类型的请求时，默认会把参数放在请求体中
在实际开发中大概率不用写前端代码，只负责编写后台接口，但怎样才能知道前端请求是什么类型参数？
关于这点可以通过浏览器开发者工具的【网络】面板可以看出来，网络面板打开时会录制网页发起的所有请求
路径占位传参就不解释了，没啥好说的，这里介绍一下路径传参、表单传参和请求体传参
编写好路径传参的请求代码后切换到网络面板，点击发起请求：
编写好请求体传参的请求代码后切换到网络面板，点击发起请求：
编写好表单类型传参的请求代码后切换到网络面板，点击发起请求：
掌握了前后端交互的流程就可以正常开发网站了，这里推荐后端返回一套规定好的模板数据，否则某些情况可能会比较难处理，例如这个查询用户列表的接口：
该接口乍一看没毛病，拿到用户列表数据后返回给前端用于渲染，合情合理，可是如果后端业务逻辑有BUG可能会导致前端接收到的结果为空，这种情况下前端就需要判断，如果接收到的值为空，就提示请求出错，问题貌似已经解决，但是如果表中本来就没有任何数据的话有应该怎么处理
上述的就是最常见的一种比较头疼的情况，所以针对这种情况最好指定一套标准的返回模板进行处理
根据刚刚的举例来看，返回结果中应该有一个标识来判断该请求是否执行成功，如果执行失败的话还应该返回失败原因，响应给前端的数据会被转换为JSON数据，使用Map集合来返回最合适不过了
在后台接口编写完成后，一般情况下我们都需要进行测试，GET请求还好，浏览器直接就访问呢了，如果是POST请求还要去写前端代码就很烦，这里介绍一款接口调试工具ApiPost
你可能没听过ApiPost，但是你大概率听说过Postman，他们的用法几乎一致，且ApiPost是国人开发的免费的接口调试工具，界面中文很友好
这里也可以看出来，form表单传参其实也算在了请求体里面，只不过使用的是 multipart/form-data 类型的参数而已，而之前提到的请求体传参对应的就是 application/json
㈣ vue-resource 怎么解决跨域问题
上一篇我们介绍了如何使用vue resource处理请求，结合服务端的REST API，就能够很容易地构建一个增删查改应用。
这个应用始终遗留了一个问题，Web App在访问REST API时，没有经过任何认证，这使得服务端的REST API是不安全的，只要有人知道api地址，就可以调用API对服务端的资源进行修改和删除。
今天我们就来探讨一下如何结合Web API来限制资源的访问。
本文的主要内容如下：
介绍传统的Web应用和基于REST服务的Web应用
介绍OAuth认证流程和密码模式
创建一个基于ASP. Identity的Web API应用程序
基于$.ajax实现OAuth的注册、登录、注销和API调用
基于vue-resource实现OAuth的注册、登录、注销和API调用
本文的最终示例是结合上一篇的CURD，本文的登录、注册、注销和API调用功能实现的。
35
本文9个示例的源码已放到GitHub，如果您觉得本篇内容不错，请点个赞，或在GitHub上加个星星！
Page Demo GitHub Source
基于$.ajax的示例如下：
注册示例 登录和注销示例 登录获取token并调用API示例 注册、登录、注销、调用API综合示例
基于vue-resource的示例如下：
注册示例 登录和注销示例 登录获取token并调用API示例 注册、登录、注销、调用API综合示例
OAuth介绍
传统的Web应用
在传统的Web应用程序中，前后端是放在一个站点下的，我们可以通过会话（Session）来保存用户的信息。
例如：一个简单的ASP. MVC应用程序，用户登录成功后，我们将用户的ID记录在Session中，假设为Session["UserID"]。
前端发送ajax请求时，如果这个请求要求已登录的用户才能访问，我们只需在后台Controller中验证Session["UserID"]是否为空，就可以判断用户是否已经登录了。
这也是传统的Web应用能够逃避面向无连接的方法。
基于REST服务的Web应用
当今很多应用，客户端和服务端是分离的，服务端是基于REST风格构建的一套Service，客户端是第三方的Web应用，客户端通过跨域的ajax请求获取REST服务的资源。
然而REST Service通常是被设计为无状态的（Stateless），这意味着我们不能依赖于Session来保存用户信息，也不能使用Session["UserID"]这种方式确定用户身份。
解决这个问题的方法是什么呢？常规的方法是使用OAuth 2.0。
对于用户相关的OpenAPI，为了保护用户数据的安全和隐私，第三方Web应用访问用户数据前都需要显式的向用户征求授权。
相比于OAuth 1.0，OAuth 2.0的认证流程更加简单。
专用名词介绍
在了解OAuth 2.0之前，我们先了解几个名词：
Resource：资源，和REST中的资源概念一致，有些资源是访问受保护的
Resource Server：存放资源的服务器
Resource Owner：资源所有者，本文中又称为用户(user)
User Agent：用户代理，即浏览器
Client： 访问资源的客户端，也就是应用程序
Authorization Server：认证服务器，用于给Client提供访问令牌的服务器
Access Token：访问资源的令牌，由Authorization Server器授予，Client访问Resource时，需提供Access Token
Bearer Token：Bearer Token是Access Token的一种，另一种是Mac Token。
Bearer Token的使用格式为：Bearer XXXXXXXX
Token的类型请参考：s://tools.ietf/html/draft-ietf-oauth-v2-15#section-7.1
有时候认证服务器和资源服务器可以是一台服务器，本文中的Web API示例正是这种运用场景。
OAuth认证流程
在知道这几个词以后，我们用这几个名词来编个故事。
简化版本
这个故事的简化版本是：用户(Resource Owner)访问资源(Resource)。
image
具体版本
简化版的故事只有一个结果，下面是这个故事的具体版本：
用户通过浏览器打开客户端后，客户端要求用户给予授权。
客户端可以直接将授权请求发给用户（如图所示），或者发送给一个中间媒介，比如认证服务器。
用户同意给予客户端授权，客户端收到用户的授权。
授权模式(Grant Type)取决于客户端使用的模式，以及认证服务器所支持的模式。
客户端提供身份信息，然后向认证服务器发送请求，申请访问令牌
认证服务器验证客户端提供的身份信息，如果验证通过，则向客户端发放令牌
客户端使用访问令牌，向资源服务器请求受保护的资源
资源服务器验证访问令牌，如果有效，则向客户端开放资源
image
以上几个步骤，(B)是较为关键的一个，即用户怎么样才能给客户端授权。有了这个授权以后，客户端就可以获取令牌，进而通过临牌获取资源。这也是OAuth 2.0的运行流程，详情请参考：s://tools.ietf/html/draft-ietf-oauth-v2-15#section-1.2
客户端的授权模式
客户端必须得到用户的授权（authorization grant），才能获得令牌（access token）。
OAuth 2.0定义了四种授权方式：
授权码模式（authorization code）
简化模式（implicit）
密码模式（resource owner password credentials）
客户端模式（client credentials）
本文的示例是基于密码模式的，我就只简单介绍这种模式，其他3我就不介绍了，大家有兴趣可以看阮大的文章：
://http://www.yingtaow.com/sitemap.html?blog/2014/05/oauth_2_0.html
密码模式
密码模式（Resource Owner Password Credentials Grant）中，用户向客户端提供自己的用户名和密码。客户端使用这些信息，向服务端申请授权。
在这种模式中，用户必须把自己的密码给客户端，但是客户端不得储存密码。这通常用在用户对客户端高度信任的情况下，比如客户端是操作系统的一部分，或者由一个着名公司出品。
image
密码嘛事的执行步骤如下：
（A）用户向客户端提供用户名和密码。
（B）客户端将用户名和密码发给认证服务器，向后者请求令牌。
（C）认证服务器确认无误后，向客户端提供访问令牌。
(B)步骤中，客户端发出的请求，包含以下参数：
grant_type：表示授权类型，此处的值固定为"password"，必选项。
username：表示用户名，必选项。
password：表示用户的密码，必选项。
scope：表示权限范围，可选项。
注意：在后面的客户端示例中，除了提供username和password，grant_type也是必须指定为"password"，否则无法获取服务端的授权。
服务端环境准备
如果您是前端开发人员，并且未接触过ASP. Web API，可以跳过此段落。
image
Authentication选择Indivial User Accounts
image
创建这个Web API工程时，VS会自动引入Owin和Asp.Identity相关的库。
image
修改ValuesController，除了IEnumerable<string> Get()操作外，其他操作都删除，并为该操作应用[Authorize]特性，这表示客户端必须通过身份验证后才能调用该操作。
public class ValuesController : ApiController
{
// GET: api/Values
[Authorize]
public IEnumerable<string> Get()
{
return new string[] { "value1", "value2" };
}
}
添加Model, Controller
image
image
image
初始化数据库
image
执行以下3个命令
image
image
执行以下SQL语句：
显示代码
CustomersController类有5个Action，除了2个GET请求外，其他3个请求分别是POST, PUT和DELETE。
为这3个请求添加[Authorize]特性，这3个请求必须通过身份验证才能访问。
隐藏代码
public class CustomersController : ApiController
{
private ApplicationDbContext db = new ApplicationDbContext();
// GET: api/Customers
public IQueryable<Customer> GetCustomers()
{
return db.Customers;
}
// GET: api/Customers/5
[ResponseType(typeof(Customer))]
public async Task<IActionResult> GetCustomer(int id)
{
Customer customer = await db.Customers.FindAsync(id);
if (customer == null)
{
return NotFound();
}
return Ok(customer);
}
// PUT: api/Customers/5
[Authorize]
[ResponseType(typeof(void))]
public async Task<IActionResult> PutCustomer(int id, Customer customer)
{
// ...
}
// POST: api/Customers
[Authorize]
[ResponseType(typeof(Customer))]
public async Task<IActionResult> PostCustomer(Customer customer)
{
// ...
}
// DELETE: api/Customers/5
[ResponseType(typeof(Customer))]
[Authorize]
public async Task<IActionResult> DeleteCustomer(int id)
{
// ...
}
}
让Web API以CamelCase输出JSON
在Global.asax文件中添加以下几行代码：
var formatters = GlobalConfiguration.Configuration.Formatters;
var jsonFormatter = formatters.JsonFormatter;
var settings = jsonFormatter.SerializerSettings;
settings.Formatting = Formatting.Indented;
settings.ContractResolver = new ();
启用CORS
在Nuget Package Manager Console输入以下命令:
Install-Package Microsoft.Asp.WebApi.Cors
在WebApiConfig中启用CORS：
public static class WebApiConfig
{
public static void Register(Configuration config)
{
var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);
// ...
}
}
类说明
在执行上述步骤时，VS已经帮我们生成好了一些类
image
IdentityModels.cs：包含ApplicationDbContext类和ApplicationUser类，无需再创建DbContext类
public class ApplicationUser : IdentityUser
{
// ...
}
public class ApplicationDbContext : IdentityDbContext<ApplicationUser>
{
// ...
}
Startup.Auth.cs：用于配置OAuth的一些属性。
public partial class Startup
{
public static OAuthOptions { get; private set; }
public static string PublicClientId { get; private set; }
// For more information on configuring authentication, please visit ://go.microsoft./fwlink/?LinkId=301864
public void ConfigureAuth(IAppBuilder app)
{
// ..
// Configure the application for OAuth based flow
PublicClientId = "self";
OAuthOptions = new
{
TokenEndpointPath = new PathString("/Token"),
Provider = new ApplicationOAuthProvider(PublicClientId),
AuthorizeEndpointPath = new PathString("/api/Account/ExternalLogin"),
AccessTokenExpireTimeSpan = TimeSpan.FromDays(14),
// In proction mode set AllowInsecure = false
AllowInsecure = true
};
// Enable the application to use bearer tokens to authenticate users
app.UseOAuthBearerTokens(OAuthOptions);
// ..
}
}
这些OAuth配置项，我们只用关注其中的两项：
TokenEndpointPath：表示客户端发送验证请求的地址，例如：Web API的站点为www.example.，验证请求的地址则为www.example./token。
UseOAuthBearerTokens：使用Bearer类型的token_type（令牌类型）。
ApplicationOAuthProvider.cs：默认的OAuthProvider实现，GrantResourceOwnerCredentials方法用于验证用户身份信息，并返回access_token（访问令牌）。
public override async Task GrantResourceOwnerCredentials( context)
{
// ...
}
通俗地讲，客户端输入用户名、密码，点击登录后，会发起请求到www.example./token。
token这个请求在服务端执行的验证方法是什么呢？正是GrantResourceOwnerCredentials方法。
客户端发起验证请求时，必然是跨域的，token这个请求不属于任何ApiController的Action，而在WebApiConfig.cs中启用全局的CORS，只对ApiController有效，对token请求是不起作用的。
所以还需要在GrantResourceOwnerCredentials方法中添加一行代码：
public override async Task GrantResourceOwnerCredentials( context)
{
context.Response.Headers.Add("Access-Control-Allow-Origin", new []{"*"});
// ...
}
IdentityConfig.cs：配置用户名和密码的复杂度，主要用于用户注册时。例如：不允许用户名为纯字母和数字的组合，密码长度至少为6位…。
隐藏代码
public static ApplicationUserManager Create(IdentityFactoryOptions<ApplicationUserManager> options, IOwinContext context)
{
var manager = new ApplicationUserManager(new UserStore<ApplicationUser>(context.Get<ApplicationDbContext>()));
// Configure validation logic for usernames
manager.UserValidator = new UserValidator<ApplicationUser>(manager)
{
= false,
RequireUniqueEmail = true
};
// Configure validation logic for passwords
manager.PasswordValidator = new PasswordValidator
{
RequiredLength = 6,
RequireNonLetterOrDigit = true,
RequireDigit = true,
RequireLowercase = true,
RequireUppercase = true,
};
// ...
return manager;
}
使用Postman测试GET和POST请求
测试GET请求
image
GET请求测试成功，可以获取到JSON数据。
测试POST请求
image
POST请求测试不通过，提示：验证不通过，请求被拒绝。
基于$.ajax实现注册、登录、注销和API调用
服务端的环境已经准备好了，现在我们就逐个实现用户注册、登录，以及API调用功能吧。
注册
页面的HTML代码如下：
<div id="app">
<div class="container">
<span id="message">{{ msg }}</span>
</div>
<div class="container">
<div class="form-group">
<label>电子邮箱</label>
<input type="text" v-model="registerModel.email" />
</div>
<div class="form-group">
<label>密码</label>
<input type="text" v-model="registerModel.password" />
</div>
<div class="form-group">
<label>确认密码</label>
<input type="text" v-model="registerModel.confirmPassword" />
</div>
<div class="form-group">
<label></label>
<button @click="register">注册</button>
</div>
</div>
</div>
创建Vue实例，然后基于$.ajax发送用户注册请求：
var demo = new Vue({
el: '#app',
data: {
registerUrl: '://localhost:10648/api/Account/Register',
registerModel: {
email: '',
password: '',
confirmPassword: ''
},
msg: ''
},
methods: {
register: function() {
var vm = this
vm.msg = ''
$.ajax({
url: vm.registerUrl,
type: 'POST',
dataType: 'json',
data: vm.registerModel,
success: function() {
vm.msg = '注册成功！'
},
error: vm.requestError
})
},
requestError: function(xhr, errorType, error) {
㈤ 前端面试get和post区别是什么ajax跨域如何解决
GET和POST的核心区别就是：
GET通过URL传输数据，位于HTTP请求头中
POST通过HTTP请求体传递数据
Ajax跨域几种方法：
CORS跨域
postMessage跨域
document.domain同主域，不同子域之间跨域
iframe的hash跨域
window.name跨域
JSONP跨域
后端代理跨域
其中1、2、3、6是最常用的，一定要说
㈥ 前端脚本发起get请求，后端将数据放到 js 回调里，前端接受响应后执行回调拿到数据，就是jsonp的原理吗
jsonp的原理
<script src="http://xxxx/xxx?callback=fnName ">
script中的src具有天然的跨域特性,以src发送的请求的返回值默认会以js语法解析,只要将需要执行的函数名以url里get请求 ?callback=fnName 接在路径后
然后后端将数据放在回调中返回,前端响应执行回调
最主要要讲到 script 中 src 带有的天然跨域性
㈦ 前端必备HTTP技能之请求头响应头格式以及请求方法简述
http协议中，客户端和服务端通过发送纯文本(ASCII)消息的方式进行通信，客户端发送请求(requests)到服务端，服务端发送响应(responses)到客户端。
请求消息格式
例子:
响应消息格式
例子:
为了标识特定资源需要特定的行为访问，HTTP协议定义了多种请求方法。这种特定资源是什么样的，是已有的数据，还有动态生成的？主要依赖于服务端实现。通常来说这种资源对应一个文件或者属于服务端的一个可执行输出。
HTTP/1.0规范定义三种请求方法：GET, POST, HEAD。HTTP/1.1规范又增加了五种：OPTIONS, PUT, DELETE, TRACE,CONNECT。
在规范中定义的这些请求方法是语义化的，并且是可依赖的。任何客户端都可以使用任何请求方法，服务端也可以配置成支持任何这些请求方法的组合。
实际上这些请求方法可以随意定义，没有数量限制，不过你自己定义出来的请求方法会被认为是不安全并且是非幂等的。
总结 ：这些请求方法本质上没有区别，最终都是TCP请求，唯一的区别就是每个请求方法，使用的时候，规范规定的使用格式不同，原则上必须按照规范规定的格式使用，其实也可以违反规范使用，比如你可以使用GET方法请求数据，也可以使用GET方法提交数据，当然你可以用POST方法提交数据，也可以用POST方法获取数据。
做好前端开发必须对HTTP的相关知识有所了解，所以我创建了一个专题 前端必备HTTP技能 专门收集前端相关的HTTP知识，欢迎关注，投稿。
㈧ 如何接受前端使用ajax发送get请求而传递过
你说的接收参数吗 如果没有使用框架那就直接用request.getparameter("key")
如果使用struts2或springmvc框架，可以这接在action中定义对应的key值，框架内部就解析了。