nginx 配置解决前端跨域问题

一、为什么会出现跨域问题
出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的。javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port。

二、什么是跨域
1.当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

nginx 是静态页面的web服务器，服务器与服务器之间访问是不存在跨域的，所以通过nginx服务器去代理访问后端服务就不会跨域，跨域只在本地会出现，线上的地址访问不会出现跨域的。

nginx.conf 文件配置：

#user nobody;

worker_processes 1;

#error_log logs/error.log;

#error_log logs/error.log notice;

#error_log logs/error.log info;

#pid logs/nginx.pid;

events {

worker_connections  1024;

}

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;

server {

    listen       80;

    server_name  localhost;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    location / {

        #root   html;

# 此处注意地址为指向你本地启动的前端项目的目录（即你的本地前端项目的所在地址，注意nginx用的是反斜杠/），如果是vue项目就是index.html的上一级目录（前端启动axios请求的baseURL = ''，配置好后前端访问不要访问启动的项目地址，直接访问nginx代理地址：127.0.0.1，因为是本地启动的nginx，所以直接访问127，nginx默认端口是80），如果是静态的html项目，也是index.html的上一级目录.

#如果发布线上的项目配置的nginx这里就是存放的是vue打包后dist包的地址的上一层目录，也就是说vue前端包放在html目录的下面

        root   D:/abc/H5/html;

        index  index.html index.html;

    }

#下面就是配置的需要代理的后端接口的服务地址，表示所有以/custom/开头的接口请求服务代理到http://10.18.21.124:8888上，返回相应的数据

    location /custom/ {

    proxy_pass http://10.18.21.124:8888;

    }

    location /ram/ {

    proxy_pass http://10.18.21.124:8888;

    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html

    #

    error_page   500 502 503 504  /50x.html;

    location = /50x.html {

        root   html;

    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80

    #

    #location ~ \.php$ {

    #    proxy_pass   http://127.0.0.1;

    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000

    #

    #location ~ \.php$ {

    #    root           html;

    #    fastcgi_pass   127.0.0.1:9000;

    #    fastcgi_index  index.php;

    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;

    #    include        fastcgi_params;

    #}

    # deny access to .htaccess files, if Apache's document root

    # concurs with nginx's one

    #

    #location ~ /\.ht {

    #    deny  all;

    #}

}



# another virtual host using mix of IP-, name-, and port-based configuration

#

#server {

#    listen       8000;

#    listen       somename:8080;

#    server_name  somename  alias  another.alias;

#    location / {

#        root   html;

#        index  index.html index.htm;

#    }

#}



# HTTPS server

#

#server {

#    listen       443 ssl;

#    server_name  localhost;

#    ssl_certificate      cert.pem;

#    ssl_certificate_key  cert.key;

#    ssl_session_cache    shared:SSL:1m;

#    ssl_session_timeout  5m;

#    ssl_ciphers  HIGH:!aNULL:!MD5;

#    ssl_prefer_server_ciphers  on;

#    location / {

#        root   html;

#        index  index.html index.htm;

#    }

#}

}

前端启动axios请求的baseURL = ''，配置好后前端访问不要访问启动的项目地址，直接访问nginx代理地址：127.0.0.1，因为是本地启动的nginx，nginx已经指向启动的前端项目，所以直接访问127.0.0.1，nginx默认端口是80

二 如果是vue项目可以直接在vue.config.js里面配置

例如：

const url = 'http://30.11.20.99:8888' // 连接后端接口的服务地址

// const url = 'http://localhost:8080'

const CompressionWebpackPlugin = require('compression-webpack-plugin')

const productionGzipExtensions = ['js', 'css', 'less', 'html', 'png', 'svg', 'jpg', 'json', 'ico', 'txt']

const px2rem = require('postcss-px2rem')

const postcss = px2rem({

remUnit: 10

})

module.exports = {

// publicPath: process.env.VUE_APP_ENVIRONMENT === 'XG_prod' ? '/lggy' : '/',

publicPath: '/',

outputDir: 'dist',

productionSourceMap: false,

configureWebpack: {

plugins: [

  new CompressionWebpackPlugin({

    asset: '[path].gz[query]',

    algorithm: 'gzip',

    test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),

    threshold: 10240,

    minRatio: 0.8

  })

]

},

css: {

loaderOptions: {

  less: {

    modifyVars: {

      'primary-color': '#28439d'

      // 'link-color': '#1DA57A',

      // 'border-radius-base': '2px',

      // 'layout-header-background': '#1890ff',

      // 'menu-dark-submenu-bg': '#00508e'

    },

    javascriptEnabled: true,

    postcss: {

      plugins: [

        postcss

      ]

    }

  }

}

},

devServer: {

disableHostCheck: true,

proxy: {

  '/auth': {

    target: url,

    changeOrigin: true

  },

  '/meta': {

    target: url,

    changeOrigin: true

  },

  '/report': {

    target: url,

    changeOrigin: true

  },

  '/ram': {

    target: url,

    changeOrigin: true

  },

  '/custom': {

    target: url,

    changeOrigin: true

  },

  '/os-public': {

    // target: 'http://10.18.36.130:8888',

    target: 'http://10.18.21.124:8888',

    changeOrigin: true

  },

  '/dw-api': {

    target: 'http://47.100.53.88:9090',

    changeOrigin: true

  }

}

},

lintOnSave: true

}