node + vue + nginx cross-domain processing project

Same Origin Policy / SOP (Same origin policy) is a convention, introduced the browser by Netscape in 1995, it is the core of the browser is also the most basic security feature, if the lack of the same origin policy, the browser is vulnerable to XSS , CSFR attacks. Homologous refers to the so-called "protocol name + + port" three same, even though two different domain names point to the same address ip, is also non-homologous, when an agreement between the request url, domain names, and any one of the three ports different from the current page url that is, cross-domain

Vue distal cross-domain processing:

proxy: {
      '/api': {
        target: 'http://www.globm.top',
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }

const baseUrlHash = {
  production: 'http://www.globm.top:6090',
  development: '/api'
}
const BASE_URL = baseUrlHash[process.env.NODE_ENV]
axios.defaults.baseURL = BASE_URL

Cross-domain processing or back-end project processing across domains nginx nginx :( project or cross-domain can be processed once, otherwise it will create a double cross-domain)

Cross-domain node

app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*")
    res.header('Access-Control-Allow-Headers', 'Content-type')
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS,PATCH")
    res.header('Access-Control-Max-Age',1728000)//预请求缓存20天
    next()
})

nginx cross-domain

location / {
        try_files $uri $uri/ /index.php?$query_string;
	add_header 'Access-Control-Allow-Origin' '*';
	add_header 'Access-Control-Allow-Credentials' 'true';
	add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS,PUT,DELETE';
	#add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,token';
	add_header 'Access-Control-Allow-Headers' '*';
    }