Vue如何设置跨域，当年在跨域踩过的那些坑

最近在学习Vue+element搭建一个后台管理项目。在实现跨域开发时踩过的那些坑。

1、开发环境下，如何做好跨域配置

    首先跨域我们要配置的文件有：config下的index.js

        dev: {

            proxyTable: {

                '/api': {

                        target: 'http://10.1.5.11:8080/',//设置你调用的接口域名和端口号

                        changeOrigin: true, //跨域

                        pathRewrite: {

                                   '^/api': '/' //这里理解成用‘/api’代替target里面的地址，

                                    后面组件中我们掉接口时直接用api代替

                                    比如我要调用'http://10.1.5.11:8080/xxx/duty?time=2017-07-07 14:57:22'，

                                    直接写‘/api/xxx/duty?time=2017-07-07 14:57:22’即可

                                    在开发环境显示地址：http://localhost:9600//api/xxx/duty?time=2017-07-07 14:57:22

                                        } }

config/dev.env.js：

   module.exports = merge(prodEnv, {

                                    NODE_ENV: '"development"',//开发环境

                                    API_HOST:"/api/"

                                    })

跨域成功，但是这只是开发环境（dev）中解决了跨域问题，生产环境中真正部署到服务器上如果是非同源还是存在跨域问题，

如我们部署的服务器端口是3001，需要前后端联调，第一步前端我们可以分生产production和开发development两种环境分别测试，

在config/dev.env.js和prod.env.js里也就是开发/生产环境下分别配置一下请求的地址API_HOST，开发环境中我们用上面配置的代理地址api，

生产环境下用正常的接口地址，所以这样配置，分别在config/dev.env.js和prod.env.js两个文件中进行以下配置。

生产环境配置：prod.env.js

    module.exports = {

                    NODE_ENV: '"production"',//生产环境

                    API_HOST:'"http://10.1.5.11:8080/"'

                    }

当然不管是开发还是生产环境都可以直接请求http://10.1.5.11:8080//。配置好之后测试时程序会自动判断当前是开发还是生产环境，然后自动匹配API_HOST，

我们在任何组件里都能用process.env.API_HOST来使用地址如：

instance.post(process.env.API_HOST+'user/login', this.form)

• 1

然后第二步后端服务器配置一下cros跨域即可，就是access-control-allow-origin：*允许所有访问的意思。

综上：开发的环境下我们前端可以自己配置个proxy代理就能跨域了，真正的生产环境下还需要后端的配合的。

某大神说：此方法ie9及以下不好使，如果需要兼容，最好的办法是后端在服务器端口加个代理，效果类似开发时webpack的代理。

1. axios发送get post请求问题 
   发送post请求时一般都要设置Content-Type，发送内容的类型，application/json指发送json对象但是要提前JSON.stringify()一下。application/xxxx-form指发送？
2. a=b&c=d格式，可以用qs.stringify()的方法格式化一下，qs在安装axios后会自动安装，只需要组件里import一下即可。

const postData=JSON.stringify(this.formCustomer);
'Content-Type':'application/json'}

const postData=Qs.stringify(this.formCustomer);//过滤成？&=格式
'Content-Type':'application/xxxx-form'}

• 1
• 2
• 3
• 4
• 5

1. 拦截器的使用 
   当我们访问某个地址页面时，有时会要求我们重新登录后再访问该页面，也就是身份认证失效了，如token丢失了，或者是token依然存在本地，但是却失效了，所以单单判断本地有没有token值不能解决问题。此时请求时服务器返回的是401错误，授权出错，也就是没有权利访问该页面。 我们可以在发送所有请求之前和操作服务器响应数据之前对这种情况过滤。

// http request 请求拦截器，有token值则配置上token值
axios.interceptors.request.use(
    config => {
        if (token) {  // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
            config.headers.Authorization = token;
        }
        return config;
    },
    err => {
        return Promise.reject(err);
    });

// http response 服务器响应拦截器，这里拦截401错误，并重新跳入登页重新获取token
axios.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        if (error.response) {
            switch (error.response.status) {
                case 401:
                    // 这里写清除token的代码
                    router.replace({
                        path: 'login',
                        query: {redirect: router.currentRoute.fullPath}   //登录成功后跳入浏览的当前页面
                    })
            }
        }
        return Promise.reject(error.response.data) 
    });

至此跨域设置成功，不过虽然设置成功了，不过还有几个坑是大家比较没有注意的，就是关于Post的时候如果没有传递参数，会有Options报错，

这个可能是Vue里面的一个问题，反正我的都有参数传递，所以这个问题基本不大。

不过如果出现类似http status 400 ，401 ，405等情况，这个不是跨域设置不成功，很可能是你传递的参数或者Http里面的一些格式的问题。

下图是本人在Vue中踩过的一个坑：

这个是由于传递的HTTP参数格式有问题，本人查找了好久终于发现问题所在，原来是接口要求传递的参数封装body，由于初次接触，本人使用了params传递，造成requestbody为null。在传递参数是使用config.data即可成功传输。具体的请求报错信息本人从这里找到，最后终于解决掉：{"timestamp":1523978119930,"status":400,"error":"Bad Request","exception":"org.springframework.http.converter.HttpMessageNotReadableException","message":"Required request body is missing:

参考具体的Http状态解决问题：

http含义：

http 200:-文件被正常的访问

http 302:临时重定向

 HTTP错误列表

HTTP 400 - 请求无效

HTTP 401.1 - 未授权：登录失败

HTTP 401.2 - 未授权：服务器配置问题导致登录失败

HTTP 401.3 - ACL 禁止访问资源

HTTP 401.4 - 未授权：授权被筛选器拒绝

HTTP 401.5 - 未授权：ISAPI 或 CGI 授权失败

HTTP 403 - 禁止访问

HTTP 403 - 对 Internet 服务管理器 (HTML) 的访问仅限于 Localhost

HTTP 403.1 禁止访问：禁止可执行访问

HTTP 403.2 - 禁止访问：禁止读访问

HTTP 403.3 - 禁止访问：禁止写访问

HTTP 403.4 - 禁止访问：要求 SSL

HTTP 403.5 - 禁止访问：要求 SSL 128

HTTP 403.6 - 禁止访问：IP 地址被拒绝

HTTP 403.7 - 禁止访问：要求客户证书

HTTP 403.8 - 禁止访问：禁止站点访问

HTTP 403.9 - 禁止访问：连接的用户过多

HTTP 403.10 - 禁止访问：配置无效

HTTP 403.11 - 禁止访问：密码更改

HTTP 403.12 - 禁止访问：映射器拒绝访问

HTTP 403.13 - 禁止访问：客户证书已被吊销

HTTP 403.15 - 禁止访问：客户访问许可过多

HTTP 403.16 - 禁止访问：客户证书不可信或者无效

HTTP 403.17 - 禁止访问：客户证书已经到期或者尚未生效

HTTP 404.1 - 无法找到 Web 站点

HTTP 404 - 无法找到文件

HTTP 405 - 资源被禁止

HTTP 406 - 无法接受

HTTP 407 - 要求代理身份验证

HTTP 410 - 永远不可用

HTTP 412 - 先决条件失败

HTTP 414 - 请求 - URI 太长

HTTP 500 - 内部服务器错误

HTTP 500.100 - 内部服务器错误 - ASP 错误

HTTP 500-11 服务器关闭

HTTP 500-12 应用程序重新启动

HTTP 500-13 - 服务器太忙

HTTP 500-14 - 应用程序无效

HTTP 500-15 - 不允许请求 global.asa

Error 501 - 未实现

HTTP 502 - 网关错误

 

错误码与状态码

     近来总有朋友咨询cPanel的Awstats中“HTTP错误码（HTTP Error codes）”的含义，以及是否需要关注和处理。

     关于Awstats请查看《CP How-To：如何使用cPanel查看站点统计数据（awstats）》

      文章地址：

http://bbs.netpu.net/viewthread.php?tid=694

      其实这是一个误会，在这里它应该是“HTTP状态码（HTTP Status codes）”。

      OK，既然是状态码，那么就可能有正确和错误两种状态了（至少不全是错误了，大大的松口气吧）。那么这些代码都代表什么含义呢？到底哪些是错误状态，哪些是正确状态呢？不要急，下边我冒充内行为大家做一个简单的介绍。

HTTP与Status codes

      HTTP可能大家都熟悉，就是超文本传输协议。浏览器通过HTTP与WEB Server通讯（也有一些其它软件比如IM使用HTTP协议传递数据），把我们的请求（HTTP Request）传递给服务器，服务器响应这个请求，返回应答（HTTP Response）以及我们需要的数据。大致就是这个样子了。

       如果我们请求啥，服务器就返回啥，是乎就不需要HTTP Status codes了。但是事情往往不是那么简单。比如我们请求一个网页页面，可是服务器不存在这个页面，或者这个页面被转移到其它地方，或者服务器禁止我们查看这个页面等等，所以为了便于浏览器处理这些正确与不正确的情况，HTTP用Status codes来表示请求（HTTP Request）在服务器端被处理的情况。Status codes通过应答（HTTP Response）返回给浏览器，浏览器根据这个作相应的处理。

HTTP Status codes的分类

      既然有正确和错误的状态，HTTP定义两大类状态码是不是就可以了？人家制订协议的可是专家（不象我是冒充的），想得比我们要周全，要长远。HTTP 1.1中定义了5大类Status codes，分别是：

Informational

       意义：信息

        范围：1XX

Successful

       意义：成功

        范围：2XX

Redirection

       意义：重定向

       范围：3XX

Client Error

       意义：客户端错误

       范围：4XX

Server Error

        意义：服务器错误

       范围：5XX

     您看看人家想得多周到啊，真专家就是真专家。

常见HTTP Status codes简介

     下面简单介绍一下我们经常碰到的HTTP Status codes。

     也许是我孤陋寡闻，常遇到的HTTP Status codes就那么几个，见笑啦。

Successful

        200 - OK：OK

        这个是最常见的啦（也许我们不会直接看到，但是如果您使用一些抓包工具，大多数http应答中都有这个）。意义很简单，就是说服务器收到并理解客户端的请求而且正常处理了。

        206 - Partial Content：部分内容。

       这个也经常发生。很容易让大家发懵。

        通俗点说就是如果客户端请求文档（图像，文本，声音等等）的部分内容，服务器正常处理，那么就返回206。大致意思就是它请求的时候，除了指定请求的内容，还指定了偏移量以及长度。

       部分内容，没搞错吧？呵呵没搞错，现在很多浏览器以及软件支持断点续传就是靠这个的。呵呵，以后看到206不要怕了。

Redirection

        301 - Moved Permanently：永久移动。

        这个状态码是指客户端要请求的资源已经被永久的转移到一个新的地方了。这个应答（HTTP Response）里边同时包含了资源的新地址。它告诉客户端，如果下次还想要这个资源，那么就用新的地址去取。

        302 Found：临时重定向。

       这个状态码是指客户端要请求的资源临时放到一个新地方了。同样，应答中也包含了资源的新地址。

        307 - Temporary Redirect：临时重定向。（如果不去实现协议或者做相关开发，我们大致理解它很302差不多就可以啦）

    

Client Error

        400 - Bad Request：错误请求

       就是请求的语法错误，服务器无法理解。

        401 – Unauthorized：未授权

       当服务器返回401 Code，就是告诉说客户端访问指定资源以前，必须通过服务器的授权。

        403 – Forbidden：禁止访问

        就是不允许访问某些资源。

        404 - Not Found：找不到

       找不到客户端请求的内容

Server Error

        500 - Internal Server Error

        服务器内部错误。

结束语

        越写越懒，所以就简简单单写这么多啦。没有啥大用处。如果能消除一两位关于这方面朋友的疑虑，就足以令我欣慰了。既然之前都说过是冒充内行，所以有错漏之处在所难免，还望大家不吝赐教。

        需要深入研究这方面内容的朋友，千万不要看这篇文章，以免被此文误导。请学习官方的协议内容。

        官方的资料地址:

        

 

源文档

 

http error codes

 

400 invalid syntax. 语法问题

401 access denied. 访问拒绝

402 payment required. 必须完整

403 request forbidden. 请求被禁止

404 object not found. 对象没有找到

405 method is not allowed. 方法不允许

406 no resp acceptable to client found. 客户端没有响应

407 proxy authentication required. 代理需要验证

408 server timed out waiting for request. 等等请求时服务器断开连接

409 user should resubmit with more info. 有冲突用户应该进行检查

410 resource is no l available. 资源不可用

411 server refused to accept request without a length. 服务器拒绝接受没有长度的请求

412 prec given in request failed. 放弃请求失败的条件

413 request entity was too large. 请求太大

414 request uniform resource identifier (uri) too long. 请求的uri 太长

415 unsupported media type. 不支持media类型

449 retry after doing the appropriate action. 在作了适当动作后重试

500 internal server error. 服务器内部错误

501 server does not support the functi required to fulfill the request. 服务器不支持请求的功能

502 error resp received from gateway. 从网关收到错误应答

503 temporarily overloaded. 过载

504 timed out waiting for gateway. 等待网关时请求断开

505 http version not supported. 不支持http的版本

 

 

http status codes returned by servers on the internet.

从internet返回的http status代码(http 状态字)

http_status_continue (100)

the request can be continued.

请求不能被继续

http_status_switch_protocols (101)

the server has switched protocols in an upgrade header.

通过新的header服务器的协议被转换了

http_status_ok (200)

the request completed successfully.

请求成功的完成

http_status_created (201)

the request has been fulfilled and resulted in the creation of a new resource.

通过新的资源请求已经被完成

http_status_accepted (202)

the request has been accepted for processing, but the processing has not been completed.

请求已经被接受处理，但是处理还没有完成

http_status_partial (203)

the returned meta information in the entity-header is not the definitive set available from the origin server.

从服务器返回的在entity-header中的meta信息是无效的

http_status_no_content (204)

the server has fulfilled the request, but there is no new information to send back.

服务器实现了请求，但是没有返回信息

http_status_reset_content (205)

the request has been completed, and the client program should reset the document view that caused the request to be sent to allow the user to easily initiate another input action.

请求已经被完成，并且web程序(客户端程序浏览器程序)已经重置了文档视图目录（c

http_status_partial_content (206)

the server has fulfilled the partial get request for the resource.

服务器已经为资源完成了部分get请求

http_status_ambiguous (300)

the server couldn't decide what to return.

服务器不能判定返回什么

http_status_moved (301)

the requested resource has been assigned to a new permanent uri (uniform resource identifier), and any future references to this resource should be d using of the returned uris.

被请求的资源已经被分配给新的uri,并且以后引用时都使用这个uris资源。

http_status_redirect (302)

the requested resource resides temporarily under a different uri (uniform resource identifier).

请求的资源临时在不同的uri下

http_status_redirect_method (303)

the resp to the request can be found under a different uri (uniform resource identifier) and should be retrieved using a get http verb on that resource.

请求的资源不能在不同的uri下找到，并且从新使用get http在服务器上从新检索

http_status_not_modified (304)

the requested resource has not been modified.

请求的资源没有被改变

http_status_use_proxy (305)

the requested resource must be accessed through the proxy given by the location field.

请求的资源必须通过特定的代理获得

http_status_redirect_keep_verb (307)

the redirected request keeps the same http verb. http/1.1 behavīor.

从定位请求，

http_status_bad_request (400)

the request could not be processed by the server due to invalid syntax.

因为语法不能被服务器处理

http_status_denied (401)

the requested resource requires user authentication.

请求资源命令必须被验证（拒绝访问）

http_status_payment_req (402)

not currently implemented in the http protocol.

没有完全实现http协议

http_status_forbidden (403)

the server understood the request, but is refusing to fulfill it.

服务器理解了请求，但是拒绝完成他

http_status_not_found (404)

the server has not found anything matching the requested uri (uniform resource identifier).

没有找到任何被指定的uri

 

http_status_bad_method (405)

the http verb used is not allowed.

http动作不被允许

http_status_none_acceptable (406)

no resp acceptable to the client were found.

应答没有被客户接受

http_status_proxy_auth_req (407)

proxy authentication required.

代理必须被验证

http_status_request_timeout (408)

the server timed out waiting for the request.

服务器在等待请求时中止了

http_status_conflict (409)

the request could not be completed due to a c with the current state of the resource. the user should resubmit with more information.

请求不能被完成，问题是资源冲突。用户应该进行调整

http_status_gone (410)

the requested resource is no l available at the server, and no forwarding address is known.

请求的资源在服务器上不再可用，而且没有转发地址

http_status_length_required (411)

the server refuses to accept the request without a defined c length.

服务器拒绝接受没有定义目录大小的请求

http_status_precond_failed (412)

the prec given in or more of the request header fields evaluated to false when it was tested on the server.

当在服务器上测试请求头文件放弃一个或者多个请求的条件

http_status_request_too_large (413)

the server is refusing to process a request because the request entity is larger than the server is willing or able to process.

服务器拒绝处理请求，原因是请求的大小超过服务器能够处理的大小

http_status_uri_too_long (414)

the server is refusing to service the request because the request uri (uniform resource identifier) is l than the server is willing to interpret.

服务器拒绝服务，原因是请求的uri超过了服务器能够揭示的长度

http_status_unsupported_media (415)

the server is refusing to service the request because the entity of the request is in a format not supported by the requested resource for the requested method.

服务器拒绝服务，原因是请求格式不被支持

http_status_retry_with (449)

the request should be retried after doing the appropriate action.

在作了适当的动作后请求被重试

http_status_server_error (500)

the server encountered an unexpected c that prevented it from fulfilling the request.

服务器遇到请求失败意外

http_status_not_supported (501)

the server does not support the functi required to fulfill the request.

服务器不支持必须完成请求的功能

http_status_bad_gateway (502)

the server, while acting as a gateway or proxy, received an invalid resp from the upstream server it accessed in attempting to fulfill the request.

服务器当作为网关或代理时，从上行服务器接受的响应请求失败

http_status_service_unavail (503)

the service is temporarily overloaded.

服务器负载

http_status_gateway_timeout (504)

the request was timed out waiting for a gateway.

等待网关时请求断开，没有响应

http_status_version_not_sup (505)

the server does not support, or refuses to support, the http protocol version that was used in the request message.

服务器不支持或者拒绝支持正在使用请求的http协议的版本