node + vue + nginx 项目跨域处理

博客地址：http://www.globm.top/blog/1/detail/24
同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源，当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

前端vue跨域处理：

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

后端项目跨域处理或nginx跨域处理：（项目或nginx处理一次跨域即可，否则会造成双重跨域）

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跨域

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' '*';
    }