CORS cross-domain solution of

What represents a cross-domain requests encountered

Usually the trailing edge separating items in the front, the front end request interface, the following error message to the browser console

Similar No 'Access-Control-Allow-Origin' header error

Why is cross-domain requests

The reason is generated by cross-domain requests: Same Origin Policy browser

This is an important security mechanism used to isolate potentially malicious files. Once the requested resource that is not so cross-domain homologous

What kind of request is a cross-domain request

It determines whether a cross-domain, essentially determines whether homologous if two pages. Protocol , Port (if specified) and domain names are the same, the two pages with the same source
, for example: requested page is:

http://store.company.com/dir/page.html

Target URL	result	the reason
`http://store.company.com/dir2/other.html`	success	Homologous
`http://store.company.com/dir/inner/another.html`	success	Homologous
`https://store.company.com/secure.html`	failure	Different protocols
`http://store.company.com:81/dir/etc.html`	failure	Different ports
`http://news.company.com/dir/other.html`	failure	Different domain

How to solve the problem of cross-domain requests

Cross-domain problem Vue development environment

Use vue-cli build the project, the development environment to solve cross-domain problems

 // config/index.js
 module.exports = {
     dev: {
        proxyTable: {
            // 代理所有以 api 开头的请求为 http://api.com
            '/api': {
                target: 'http://api.com', // 接口地址
                changeOrigin: true,
                pathRewrite: {
                     '^/api': '' //替换 /api 为 ''
                        }
                  }
            }
      }
}

Request url: / api / xxx / matching request / api beginning
After requesting a proxy url: http: //api.com/xxx (target + pathRewrite)
pathRewrite rewriting path, / api replaced '

vue-cli using the http-proxy-middleware This middleware, and many more configurations, such as support for WebSocket

{
    // ...
    ws: true
}

Online and solve cross-domain environment

Nginx reverse proxy
in a production environment, the above approach would not achieve the role. This time can be modified by nginx configuration files, adding agents
Add Access-Control-Allow- * in response to the first
cross-domain resource sharing (CORS) the presence of such a mechanism, when the resource requesting party and the requested resource in a different domain or the port, then it will have cross-domain requests:
1 to launch a preflight request, whether to allow cross-domain recognizes server. Method for the OPTIONS request
after 2 contains the Access-Control-Allow- * and several reception response in response to the first header, the request is allowed cross-domain, i.e., initiates formal request

Preflight allowed cross-domain request response header

                Access-Control-Allow-Origin: *  // * 表示允许任意地址,也可是具体域名http://foo.example
                Access-Control-Allow-Methods: * // * 表示允许任意方法,也可是POST, GET, OPTIONS等方法
                Access-Control-Allow-Headers:Token,Custom-Head // 允许这些自定义的请求头
                Access-Control-Max-Age:600 // 返回结果可以用于缓存的最长时间,单位秒,返回-1表示禁用缓存(非必须)

Solution: In response to the OPTIONS request response header, increases the allowable cross-domain specific response headers

Reference links
vue-cli reference documentation
http-proxy-middleware project
MDN-CORS explained Ruan Yifeng CORS Comments