1. Why cross-domain problems occur
Due to the same-origin policy restrictions of the browser. Same origin policy (Same origin policy) is a convention. It is the core and most basic security function of the browser. If the same origin policy is missing, the normal functions of the browser may be affected. It can be said that the Web is built on the basis of the same-origin policy, and the browser is just an implementation of the same-origin policy. The same origin policy blocks a domain. JavaScript scripts interact with content from another domain. The so-called same origin (that is, in the same domain) means that the two pages have the same protocol, host and port number.
2. What is cross-domain
1. When any one of the protocol, domain name, and port of a request URL is different from the current page URL, it is cross-domain.
nginx is a web server for static pages. There is no cross-domain access between servers. Therefore, proxy access to back-end services through the nginx server will not be cross-domain. Cross-domain will only occur locally. Online address access There will be no cross-domain.
nginx.conf file configuration:
#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;
# Note here that the address points to the directory of your locally launched front-end project (that is, the address of your local front-end project. Note that nginx uses a backslash /). If it is a vue project, it is the upper-level directory of index.html. (The baseURL of the front-end startup axios request = ''. After configuration, the front-end access does not need to access the startup project address. Directly access the nginx proxy address: 127.0.0.1. Because nginx is started locally, access 127 directly. , nginx default port is 80), if it is a static html project, it is also the upper-level directory of index.html.
#If the nginx of the online project configuration is released, this is the upper directory where the address of the dist package after vue packaging is stored. That is to say, the vue front-end package is placed under the html directory.
root D:/abc/H5/html;
index index.html index.html;
}
#The following is the service address of the configured back-end interface that needs to be proxied, which means that all interfaces starting with /custom/ request service proxies to http://10.18.21.124:8888 and return the corresponding data.
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;
# }
#}
}
The baseURL of the front-end startup axios request = ''. After configuration, the front-end access does not need to access the startup project address. Directly access the nginx proxy address: 127.0.0.1. Because it is a locally started nginx, nginx has already pointed to the startup. Front-end project, so access 127.0.0.1 directly, nginx default port is 80
2. If it is a vue project, it can be configured directly in vue.config.js
For example:
const url = 'http://30.11.20.99:8888' // Service address to connect to the backend interface
// 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
}