Vue使用axios跨域请求

首先说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 认证相关数据）。

扫描二维码关注公众号，回复： 1238629 查看本文章

出自 HTTP访问控制(CORS) 强烈建议仔细阅读

解决方案如果 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)

Vue使用axios跨域请求

猜你喜欢