前后端分离跨域问题'Access-Control-Allow-Origin' header is present on the requested resource.

vue+nginx解决跨域问题遇到的坑No 'Access-Control-Allow-Origin' header is present on the requested resource.

1.在vue config文件夹下index.js设置项目启动地址

我这里设置的就是localhost:8899访问项目

2.在vue config文件夹下dev.env.js配置nginx地址

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  //BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"',
  BASE_API: '"http://localhost:9001"',  //这个是nigin的地址，使用nigin解决跨域问题
})

3. 配置nginx

server {
        listen       9001;
        server_name  localhost;
		
		location /eduservice/ {
		   
            proxy_pass   http://localhost:8001/eduservice/;
        }
		
		location /eduoss/ {
            proxy_pass   http://localhost:8002/;
        }
		
		location /vod/ {
            proxy_pass   http://localhost:8003/;
        }
    }

　这个项目访问的逻辑客户端localhost:8899 去访问nginx localhost:9001,nginx通过请求路径代理到不同的后端服务器。但是在实现中发现会出现Access-Control-Allow-Origin' header is present on the requested resource错误

原因是nginx 默认是不能通过跨域的方式访问的及 localhost:8899 到nignx localhost:9001存在一个跨域

需要给Nginx服务器配置响应的header参数：

add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
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';

1. Access-Control-Allow-Origin

nginx默认是不被允许跨域的。给Nginx服务器配置`Access-Control-Allow-Origin *`后，表示服务器可以接受所有的请求源（Origin）,即接受所有跨域的请求。

2. Access-Control-Allow-Headers 是为了防止出现以下错误：

Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

这个错误表示当前请求Content-Type的值不被支持。其实是我们发起了"application/json"的类型请求导致的。这里涉及到一个概念：预检请求（preflight request）,请看下面"预检请求"的介绍。

3. Access-Control-Allow-Methods 是为了防止出现以下错误：

Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

所以当出现Access-Control-Allow-Origin' header is present on the requested resource.只需要修改nginx配置加上

add_header 'Access-Control-Allow-Origin' '*';就可以结局问题了

http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;
    gzip  on;
    client_max_body_size 1024m;
    proxy_connect_timeout 600;
    proxy_read_timeout 600;
    proxy_send_timeout 600;
	
	add_header 'Access-Control-Allow-Origin' '*';
	
	server {
        listen       9001;
        server_name  localhost;
		
		location /eduservice/ {
		   
            proxy_pass   http://localhost:8001/eduservice/;
        }
		
		location /eduoss/ {
            proxy_pass   http://localhost:8002/;
        }
		
		location /vod/ {
            proxy_pass   http://localhost:8003/;
        }
    }

    

}

小蘑菇