一、为什么会出现跨域问题
出于浏览器的同源策略限制。同源策略（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;

#pidlogs/nginx.pid;

events {

worker_connections 1024;

}

http {

includemime.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;

sendfileon;

#tcp_nopush on;

#keepalive_timeout 0;

keepalive_timeout 65;

#gzip on;

server {

listen80;

server_name localhost;

#charset koi8-r;

#access_log logs/host.access.log main;

location / {

#roothtml;

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

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

rootD:/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_page500 502 503 504 /50x.html;

location = /50x.html {

roothtml;

}

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

#

#location ~ \.php$ {

#proxy_passhttp://127.0.0.1;

#}

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

#

#location ~ \.php$ {

#roothtml;

#fastcgi_pass127.0.0.1:9000;

#fastcgi_index index.php;

#fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;

#includefastcgi_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 {

#listen8000;

#listensomename:8080;

#server_name somename alias another.alias;

#location / {

#roothtml;

#index index.html index.htm;

#}

#}

# HTTPS server

#

#server {

#listen443 ssl;

#server_name localhost;

#ssl_certificate cert.pem;

#ssl_certificate_key cert.key;

#ssl_session_cacheshared:SSL:1m;

#ssl_session_timeout 5m;

#ssl_ciphers HIGH:!aNULL:!MD5;

#ssl_prefer_server_ciphers on;

#location / {

#roothtml;

#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

}