webapicors_WebApi内置跨域功能为什么我就实现不了

① enablecors-webapi跨域为何不能实现有哪些注意事项

② 如何让WEBAPI 能够进行跨越访问

Cors是个比较热的技术，这在蒋金楠的博客里也有体现，Cors简单来说就是“跨域资源访问”的意思，这种访问我们指的是Ajax实现的异步访问，形象点说就是，一个A网站公开一些接口方法，对于B网站和C网站可以通过发Xmlhttprequest请求来调用A网站的方法，对于xmlhttprequest封装比较好的插件如jquery的$.ajax，它可以让开发者很容易的编写AJAX异步请求，无论是Get,Post,Put,Delete请求都可以发送。
Cors并不是什么新的技术，它只是对HTTP请求头进行了一个加工，还有我们的Cors架构里，对jsonp也有封装，让开发者在使用jsonp访问里，编写的代码量更少，更直观，呵呵。（Jsonp和Json没什么关系，它是从一个URI返回一个Script响应块，所以，JSONP本身是和域名没关系的，而传统上的JSON是走xmlhttprequest的，它在默认情况下，是不能跨域访问的）

③ WebApi内置跨域功能，为什么我就实现不了

在Web.config的system.webServer配置节下增加配置

<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Headers" value="*" />
<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE" />
</customHeaders>
</httpProtocol>
如果通过jquery 跨域访问，在服务器端和客户端需要分别配合：

1. 在服务器端，需要为每一个请求进行授权。例如在消息头中要有
Access-Control-Allow-Origin:*
2. 在客户端要写
jQuery.support.cors = true;

④ 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) {

⑤ 前端学习到什么程度可以找工作

对学习前端的同学来说，你能力越高就越好找工作。因为现在的前端求职市场不缺初级前端，初级前端已经饱和了。一大批刚学完三大项的人就急冲冲除去找工作了，这就导致找不到工作的同时、公司也找不到人。那到底要学到什么样子呢？
入门: 能用html css实现任何网站的静态布局。这个难度不大，能做到就能达到切图仔的水平
可以干活: 能用js写基本动态效果，绑定事件，用原生或jq操作dom。
勉强合格: 以上两项达到熟练，并可以用js写较复杂的交互。到这里就可以找到前端的工作并干活了。
合格: 知道如何实现js的继承，能说出一个new的过程，会合理用闭包，会用promise， amd cmd模块化，会用underscore，能写正则。会其中两到三项。到这里应该可以找到缺人并还算不错的互联网公司前端工作
还行: 能手写js的原型链继承，知道一个promise的实现机制，能写出underscore中大部分函数，手写delegate，随便找个库基本能看明白是干嘛。到这里应该可以冲bat了吧。
不错: 对页面性能的优化有研究， mvc框架能够分析出个优缺点所以然来，对打包发布工具有研究。到这份上能算靠谱的前端了吧
牛人：根据业务需要写所需的打包发布模块化工具，有能力自己写框架，对开发流程和方式有自己的见解，不依赖类库，项目需要啥就随手写一个模块，造过轮子无数。到这份上国内前端工作可以任挑了。

⑥ js调用跨域get请求调用webApi 多出个options请求是为什么

我尝试用我的语言描述一下吧：

先说跨域请求的原理，浏览器的安全机制是不允许出现跨域请求的，否则会有很严重的安全问题，解决跨域问题有几种不同的方法，你题目中提到的方法就是通过在Response header中添加Access-Control-Allow-Origin 来让浏览器知道服务器所在的域，对用于访问的域进行了授权。

但是因为这个Header要服务器提供，所以无论如何，请求是要先发出去才能指导是不是允许跨域请求，所以在报跨域错误的时候，虽然报错了，但是请求实际上依然发送到服务器了，只是浏览器看了一眼服务器的返回，然后发觉不行，这个请求返回的header里没有授权，所以浏览器不能用。

这样就带来一个问题，请求会对服务器造成影响，试想一下，要使用XHR跨域提交一个表单，无论返回头里面是否添加了跨域的header，都会提交一个请求到服务器，服务器要进行相应的操作。这种情况其实在一定条件下也是可以接受的，但是如果有更大的安全隐患，就不可以了，所以就需要OPTIONS请求了。

OPTIONS请求就是在符合一定条件下的跨域请求发送之前，浏览器会先发一个OPTIONS请求，问一下服务器，是不是能跨域，如果能，就发真正的请求，如果不能，就不发了。这个的作用就很好理解了。

如上面所说，不是所有的跨域请求都要先发OPTIONS请求的，规范里面规定，以下情况不需要先发一个 OPTIONS请求：

请求类型必须是GET、HEAD、POST中的一种。
请求的Header里面只能包涵一些规范重点Header，以及规范的值，包括：Accept、Accept-Language、Content-Language、Content-Type、DPR、Downlink、Save、Data、Viewport-Width、Width
Content-Type的类型必须是以下几种：application/x-www-form-urlencoded、multipart/form-data、text/plain

所以，如果你不希望浏览器多余的发一个OPTIONS请求，只要遵循这个规范就可以了。

但是有时候因为需求原因，也难避免要自定义一些Header。比如，很多JS的AJAX库，都会自定义一个Header，让服务器可以识别出这是否是一个异步请求，这样OPTIONS请求就一定要被先发送了。

顺便说，服务器端也要判断OPTIONS类型的请求，进行一系列操作，不要让OPTIONS请求影响到数据。

更多内容，可以看相关资料和文档：

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

https://developer.mozilla.org/en-US/docs/Web/HTTP/Server-Side_Access_Control

https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html

webapicors

与webapicors相关的内容