首先说axios跨域的问题,使用vue必然要请求api接口获得数据,那么跨域的问题也随之而来,你总会碰到的。
下面针对解决使用axios请求 服务端,返回 Access-Control-Allow-***** 和 405 method not allowed
axios 的跨域问题,分以下几种情况:
1、 server 端不支持跨域,比如遇到下面的错误就是这种情况
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://xxx.com' is therefore not allowed access.
解决方案:如果 server 端是自己开发的,那么修改相关代码支持跨域即可。如果不是自己开发的,那么可以自己写个后端转发该请求,用代理的方式实现。
2、 server 端支持跨域,但不能响应 OPTIONS 请求,比如在开发者工具中看到下图中的情况,说明 Nginx 不能响应 OPTIONS 请求。
出现 OPTIONS 请求的原因:
跨源资源共享标准通过新增一系列 HTTP 头,让服务器能声明哪些来源可以通过浏览器访问该服务器上的资源。另外,对那些会对服务器数据造成破坏性影响的 HTTP 请求方法(特别是 GET 以外的 HTTP 方法,或者搭配某些MIME类型的POST请求),标准强烈要求浏览器必须先以 OPTIONS 请求方式发送一个预请求(preflight request),从而获知服务器端对跨源请求所支持 HTTP 方法。在确认服务器允许该跨源请求的情况下,以实际的 HTTP 请求方法发送那个真正的请求。服务器端也可以通知客户端,是不是需要随同请求一起发送信用信息(包括 Cookies 和 HTTP 认证相关数据)。
解决方案如果 server 端也支持简单请求(见下方定义),特别是 axios POST请求时,默认使用 JSON 格式,改成 string 问题就解决了!官方推荐的修改方法;如果 server 端只支持 JSON 格式的 POST 请求,看看能不能修改 server 的配置,让它支持 OPTIONS,如果 server 改不了,那就又只能自己写代理了。
简单请求:1. 只使用 GET, HEAD 或者 POST 请求方法。如果使用 POST 向服务器端传送数据,则数据类型(Content-Type)只能是 application/x-www-form-urlencoded, multipart/form-data 或 text/plain中的一种。2. 不会使用自定义请求头(类似于 X-Modified 这种)。
下面根据我的实际情况进行分析:
1、No 'Access-Control-Allow-Origin' 或者 Access-Control-Allow-Headers 或者Access-Control-Allow-Methods 之类的问题,修改server端。其实在web.config中加入3条记录就可以。
方法一:
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Content-Type, Accept" />
<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
</customHeaders>
</httpProtocol>
</system.webServer>
<add name="Access-Control-Allow-Origin" value="*" />(*就是全部)
<add name="Access-Control-Allow-Headers" value="Content-Type, Accept" />(这个是允许的header头信息)
<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />(允许的请求方法)
方法二:
还有一个种方法是引入.net的 CROS dll。简单说一下:
使用Nuget搜索“microsoft.aspnet.webapi.cors”
然后在App_Start文件夹下面的WebApiConfig.cs文件夹配置跨域
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
//跨域配置
config.EnableCors(new EnableCorsAttribute("*", "*", "*"));
// Web API 路由
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{action}/{id}",
defaults: new { id = RouteParameter.Optional }
);
}
}
我们暂定三个“*”号,当然,在项目中使用的时候一般需要指定对哪个域名可以跨域、跨域的操作有哪些等等。这个在下面介绍。
需要注意的是
两种方法不要同时使用
,使用一种即可。
2、我们再请求api的时候必然加入各种字段信息验证,通常就是加token。如果header里面加入了非标准的请求的参数,这个时候你的请求会由正常的post/get请求,变成 先发送options请求 获得服务器许可后,在发送post/get。
而一般情况下,我们再编写api接口时,get接口就只允许get请求方式来访问,同理post只允许post请求访问
/// <summary>
/// 检查版本更新
/// </summary>
/// <param name="entity"></param>
/// <returns></returns>
[HttpPost]
public HttpResponseMessage CheckVersion(CETB_CheckVersionParams Params)
这个时候就会发生405 method not allowed,因为你先发送的是 options请求
只需在接口上面加上允许opions请求即可,
/// <summary>
/// 检查版本更新
/// </summary>
/// <param name="entity"></param>
/// <returns></returns>
[HttpPost]
[HttpOptions]
public HttpResponseMessage CheckVersion(CETB_CheckVersionParams Params)